Jetpack Compose Row 中的等宽元素

Question

在 Jetpack Compose 中使 Row 的所有子项的宽度相同的最简单方法是什么？例如，如果 Row 中有 4 个 Box 元素，我希望每个 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

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

Answer 4

您可以对该行的子行使用 Modifier.weight(1f)。

一个很好的例子是这 3 个不同长度的文本。

 Row(Modifier.padding(4.dp)) {
    
            Text(
                text = "boy",
                modifier = Modifier
                        .weight(1f)
                        .border(width = 1.dp, Color.Blue, shape = RectangleShape)
                        .padding(4.dp)
    
            )
            Spacer(modifier = Modifier.width(4.dp))
            Text(
                text = "girls",
                modifier = Modifier
                        .weight(1f)
                        .border(width = 1.dp, Color.Blue, shape = RectangleShape)
                        .padding(4.dp)
    
            )
    
            Spacer(modifier = Modifier.width(4.dp))
            Text(
                text = "countries",
                modifier = Modifier
                        .weight(1f)
                        .border(width = 1.dp, Color.Blue, shape = RectangleShape)
                        .padding(4.dp)
    
            )
...}

我们只需应用 Modifier.weight (1F) 即可使宽度相同，尽管字符数量不同。