Jetpack Compose Row 中的等宽元素

Question

在 Jetpack Compose 中使a 的所有子项宽度相同的最简单方法是什么Row？例如，如果Boxa 中有 4 个元素Row，我希望每个元素的Box宽度为整行的 1/4（减去填充）。

Answer 1

您可以使用修饰符。包含最大宽度的行并向框添加重量，例如

Modifier.fillMaxWidth().weight(1f)

例如，

Row(
    modifier = Modifier
        .fillMaxWidth()
        .padding(5.dp)
) {
    for (i in 0..3) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(100.dp)
                .weight(1f)
                .padding(horizontal = 5.dp)
                .background(Color.Blue)
        )
    }
}

Answer 2

spacedBy在行上使用属性并weight在子项上使用修饰符。查看下面的示例：

@Preview(showBackground = true)
@Composable
fun EquiRow() {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        horizontalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        repeat(4) {
            Box(
                modifier = Modifier
                    .weight(1f)
                    .height(96.dp)
                    .background(Color.Blue)
            ) {

            }
        }
    }
}

Answer 3

对所有元素使用权重修饰符Modifier.weight(1)