Jetpack Compose 中的堆叠列

Question

我在 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))
) {
}

提前谢谢您！

Answer 1

要在没有约束布局的情况下堆叠列，您必须添加一个外部

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

上应用您需要的任何修饰符。

代码结果：

Answer 2

您可以使用 LazyColumn 创建项目堆栈，如下面的代码所示，这里的 Negative Arrangement.spacedBy 为惰性列的项目提供堆栈效果

@Composable
fun CardsStackView(cards: List<CardUiModel> = getMockedCards()) {
    LazyColumn(
        verticalArrangement = Arrangement.spacedBy((-50).dp),
        modifier = Modifier
            .padding(top = 50.dp, end = 10.dp, start = 10.dp)
    ) {
        itemsIndexed(cards) { index, card ->
            CardView(index, card)
        }
    }
}

@Composable
fun CardView(index: Int, cardUiModel: CardUiModel) {
    Card(
        shape = RoundedCornerShape(8.dp),
        modifier = Modifier
            .height(80.dp)
            .width(260.dp)
    ) {
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = getCardColor(index)
        ) {
            Box(contentAlignment = Center) {
                Text(text = cardUiModel.name)
            }
        }
    }
}

private fun getMockedCards() = listOf(
    CardUiModel("Visa"),
    CardUiModel("Amex"),
    CardUiModel("Rupay"),
    CardUiModel("Master Card")
)

private fun getCardColor(index: Int) =
    when (index) {
        0 -> Color.Blue
        1 -> Color.Magenta
        2 -> Color.Cyan
        3 -> Color.Red
        else -> Color.Yellow
    }

data class CardUiModel(val name: String)


@Preview(showBackground = true, device = Devices.PIXEL_XL)
@Composable
fun CardsStackViewPreview() {
    MaterialTheme {
        CardsStackView()
    }
}

它将如下图所示