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

Question

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

ConstraintLayout（黄色）包装

• 粘性顶部文本（绿色）
• 滚动视图（灰色）
• 粘性底部文本（黄色）

我是这样实现的：

@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))
}