创建时间线喷气背包组合答案

【问题标题】：Create timeline jetpack compose创建时间线喷气背包组合
【发布时间】：2022-01-19 06:36:52
【问题描述】：

我正在尝试使用 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)
    }
}

【问题讨论】：

您尝试过 Compose beta01 吗？使用 Compose beta01 使用您的代码（我刚刚将 DefaultText 替换为 Text），我得到了预期的结果。
感谢您的回答，现在 beta01 工作正常！但是，如果您需要更多自定义布局，我们可以通过 Layout{ measurables, constraints -> } 来实现，感谢您的回复！

标签： android android-layout android-jetpack-compose

【解决方案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
    )
}

【讨论】：

虽然这段代码可以回答这个问题，但最好在不介绍其他代码的情况下解释它是如何解决问题的，以及为什么要使用它。从长远来看，纯代码答案没有用处。

【解决方案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")
                }
            }
        }
    }

【讨论】：