创建时间线喷气背包组合

Question

我正在尝试使用 Jetpack Compose 创建一个时间线，我发现实际上不可能为每一行创建没有空格和动态高度的行，具体取决于文本。 我已经尝试过使用Row和ConstraintLayout ，结果总是一样的。 我发现了一个作弊方法，通过在中间放置一个Text来使Box可见，否则Box永远不会变高。 我究竟做错了什么？

@Composable
fun SessionMaterialRow(item:String){
    ConstraintLayout(modifier = Modifier) {
        val (lineReference,textReference) = createRefs()
        Box(
            modifier = Modifier.constrainAs(lineReference){
                top.linkTo(parent.top)
                bottom.linkTo(parent.bottom)
                start.linkTo(parent.start,20.dp)
                width = Dimension.preferredValue(2.dp)
            }
                .background(color = Color.Red)
        ){
            Text(" ")
        }
        DefaultText( modifier = Modifier.constrainAs(textReference){
            top.linkTo(parent.top)
            bottom.linkTo(parent.bottom)
            start.linkTo(lineReference.start,10.dp)
            end.linkTo(parent.end)
        },
                text = stringResource(id = R.string.title_session_number,"")+ " - " +"Text",
                style = title2Style
        )
    }
}

我也有“LazyColumn”。

LazyColumn {
    items(listItems) {
        SessionMaterialRow(item = it)
    }
}

Answer 1

ConstraintLayout(modifier = Modifier) {
    val (lineReference,textReference) = createRefs()
    Box(
        modifier = Modifier.constrainAs(lineReference){
            top.linkTo(parent.top)
            bottom.linkTo(parent.bottom)
            start.linkTo(parent.start,20.dp)
            height = Dimension.fillToConstraints
        }
            .background(color = Color.Red)
    ){
        Box(Modifier.width(2.dp))
    }
    Text( modifier = Modifier.constrainAs(textReference){
        top.linkTo(parent.top)
        bottom.linkTo(parent.bottom)
        start.linkTo(lineReference.start,10.dp)
        end.linkTo(parent.end)
    },
        //some text
    )
}

Answer 2

@van_fx 回答是我正在寻找的最简单的答案。 像魅力一样工作。 他的回答类似于 xml 中的约束布局。 但是您不需要多个 Box，请改用 Spacer。

    @Preview
    @Composable
    fun Test() {
        val data = (1..3).toList()
        ConstraintLayout(Modifier) {
            val (lineReference,textReference) = createRefs()
            Spacer(
                modifier = Modifier
                    .constrainAs(lineReference) {
                        top.linkTo(parent.top)
                        bottom.linkTo(parent.bottom)
                        start.linkTo(parent.start, 10.dp)
                        height = Dimension.fillToConstraints
                    }
                    .background(color = Color.Red)
                    .width(2.dp)
            )
            LazyColumn(
                modifier = Modifier.constrainAs(textReference) {
                top.linkTo(parent.top)
                bottom.linkTo(parent.bottom)
                start.linkTo(lineReference.start,10.dp)
                end.linkTo(parent.end)
            }) {
                items(data) {
                    Text("jaklsdfjlkasf")
                }
            }
        }
    }