如何将 Jetpack Compose ConstraintLayout 与 Column 一起使用

Question

我想在 compose 中测试一个简单的布局：

ConstraintLayout（黄色）包装

• StickyTopText（绿色）
• 滚动视图（灰色）
• StickyBottomText（黄色）

我是这样实现的：

@Composable
@Preview
fun MapOverlay() {
    ConstraintLayout(
        modifier = Modifier
            .background(Color.Yellow)
            .fillMaxHeight()
    ) {

        val (stickyTop, scroller, stickyBottom) = createRefs()

        Text(text = "Sticky Top Text",
            modifier = Modifier
                .constrainAs(stickyTop) {
                    top.linkTo(parent.top)
                }
                .background(Color.Green)
        )

        Column(
            modifier = Modifier
                .constrainAs(scroller) {
                    top.linkTo(stickyTop.bottom)
                    bottom.linkTo(stickyBottom.top)
                    height = Dimension.fillToConstraints
                }
                .verticalScroll(rememberScrollState())
        ) {
            repeat(80) {
                Text(
                    text = "This is Test $it of 80",
                    modifier = Modifier
                        .fillMaxWidth()
                        .background(Color.LightGray)
                )
            }
        }

        Text(text = "Sticky Bottom Text",
                modifier = Modifier
                    .background(Color.Red)
                    .constrainAs(stickyBottom) {
                        bottom.linkTo(parent.bottom)
                    })
        }
    }

大部分工作都很好，除了列表在第 77 项而不是 80 项的末尾被截断：（79；零索引）

我做错了什么？或者这是一个错误？ （我知道我可能会通过脚手架来做到这一点，但这似乎过度设计了。另外，我想理解这个问题，而不是规避它

撰写版本 1.0.0-beta09

Answer 1

我检查了您的代码，它确实不适用于 1.0.0-alpha07，但它适用于 1.0.0-alpha08（并编写 1.0.0-beta09）?

另外，您使用 ConstraintLayout 有什么特殊原因吗？您可以使用以下代码获得相同的结果：

Column(
    Modifier
        .background(Color.Yellow)
        .fillMaxHeight()
) {
    Text("Sticky Top Text", Modifier.background(Color.Green))
    Column(
        Modifier
            .weight(1f)
            .verticalScroll(rememberScrollState())
    ) {
        repeat(80) {
            Text(
                "This is Test ${it + 1} of 80",
                Modifier
                    .fillMaxWidth()
                    .background(Color.LightGray)
            )
        }
    }
    Text("Sticky Bottom Text", Modifier.background(Color.Red))
}