Jetpack Compose Row 中的等宽元素

Question

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

Answer 1

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

Answer 2

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

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 3

您可以对行的子项使用 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)使宽度相同，尽管字符数不同。

Answer 4

对行使用 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)
            ) {

            }
        }
    }
}

Jetpack Compose Row 中的等宽元素

Equal width elements in Jetpack Compose Row

android

android-layout

android-jetpack-compose