kotlin 在Jetpack合成中堆叠列

k97glaaz  于 2023-03-03  发布在  Kotlin
关注(0)|答案(1)|浏览(183)

我在Jetpack Compose的基础上遇到了一些问题。如果我像示例一那样堆叠列,它可以正常工作。在示例二中,高度修改器不起作用,任何连续的列都将填充整个屏幕,覆盖第一列。
我想主要的问题是,当列不使用ConstraintLayout时,为什么高度不影响列?
示例一:

ConstraintLayout (modifier = Modifier
) {
    val startGuideline = createGuidelineFromTop(0.2f)
    val (statsLayout, boardLayout) = createRefs()

    Column (modifier = Modifier
        .fillMaxWidth()
        .height(100.dp)
        .background(color = colorResource(id = R.color.light_grey))
        .constrainAs(statsLayout) {
            top.linkTo(parent.top)
            bottom.linkTo(startGuideline)
        }
    )

    Column(modifier = Modifier
        .fillMaxWidth()
        .height(150.dp)
        .background(color = colorResource(id = R.color.teal_200))
        .constrainAs(boardLayout) {
            top.linkTo(startGuideline)
        }
    ) {
    }
}

例二:

Column (modifier = Modifier
    .fillMaxWidth()
    .height(100.dp)
    .background(colorResource(id = R.color.lighter_grey)),
) {
}

Column(modifier = Modifier
    .fillMaxWidth()
    .height(100.dp)
    .background(colorResource(id = R.color.teal_200))
) {
}

先谢谢你!

jxct1oxe

jxct1oxe1#

要堆叠没有约束布局的列,您必须添加一个外部Column,其中包含示例二中的两列,它应该如下所示:

Column {

    Column (modifier = Modifier
        .fillMaxWidth()
        .height(100.dp)
        .background(
            color = Color.LightGray
        ),
    ) {
        Text(text = "Column 1 - Text 1")
        Text(text = "Column 1 - Text 2")
    }

    Column(modifier = Modifier
        .fillMaxWidth()
        .height(100.dp)
        .background(
            colorResource(
                id =
                R.color.teal_200
            )
        )
    ) {
        Text(text = "Column 2 - Text 1")
        Text(text = "Column 2 - Text 2")
    }

}

也可以在外部Column上应用任何所需的修改器。
代码结果:

相关问题