Jetpack Compose：如何实现两列等高布局

问题描述 #

现有一个包含两列的Row布局：左侧蓝色Column包含2个子Row，右侧青色Column包含3个子Row。需求是让两个Column保持等高。

原代码如下：

@Preview(showBackground = true)
@Composable
fun TwoColumns() {
    Row {
        BottomLeftLetterKey(columns = 2, rows = 2, Color.Blue)
        Spacer(modifier = Modifier.weight(1f))
        BottomLeftLetterKey(columns = 3, rows = 3, Color.Cyan)
    }
}

@Composable
fun BottomLeftLetterKey(columns: Int, rows: Int, color: Color) {
    Column(modifier = Modifier.background(color)) {
        repeat(columns) {
            Row {
                repeat(rows) {
                    ElevatedButton(onClick = { /*TODO*/ },
                        shape = RoundedCornerShape(4.dp),
                        colors = ButtonDefaults.elevatedButtonColors(containerColor = Color.Green, contentColor = Color.Red),
                        contentPadding = PaddingValues(0.dp)
                    ) {
                        Text(text = "2")
                    }
                }
            }
        }
    }
}

尝试给Column添加fillMaxHeight()后，布局高度超出预期；改用height(IntrinsicSize.Min/Max)时，测试发现两者效果一致，根据官方文档描述：

The Row composable's minIntrinsicHeight will be the maximum minIntrinsicHeight of its children.

希望确认应该选择IntrinsicSize.Min还是Max，并获取相关布局建议。

解决方案与说明 #

1. 为什么直接用fillMaxHeight()会出问题 #

直接给Column设置fillMaxHeight()时，父Row默认采用wrapContentHeight()，其高度由最高的子项（青色Column）决定。但此时蓝色Column会试图撑满父Row的高度，而父Row的高度又依赖子项，容易导致布局高度不受控（比如超出预览或父容器范围），因为没有先明确父Row的高度基准。

2. 内在尺寸（IntrinsicSize）的作用 #

内在尺寸测量是Compose中让父容器先计算子项的尺寸需求，再确定自身尺寸的机制，能避免上述循环依赖问题。对于等高需求，正确的做法是给父Row设置内在高度，再让子Column填充这个高度。

3. IntrinsicSize.Min vs IntrinsicSize.Max的选择 #

• IntrinsicSize.Min：表示父容器（Row）的最小内在高度，即所有子项中“刚好容纳自身内容所需的最小高度”的最大值。在你的场景中，青色Column的最小内在高度更高，Row会以此为自身高度，蓝色Column设置fillMaxHeight()后会拉伸到这个高度，完美实现等高。
• IntrinsicSize.Max：表示父容器的最大内在高度，即所有子项中“能容纳内容的最大高度”的最大值。当前场景下因为子项内容固定（按钮高度一致），所以和Min效果相同，但如果未来子项内容可伸缩（比如Text支持换行压缩），两者会产生差异。

根据官方文档描述，IntrinsicSize.Min更贴合你的需求——它基于子项的最小必要高度来确定Row高度，是实现等高布局的标准选择。

4. 修改后的代码 #

@Preview(showBackground = true)
@Composable
fun TwoColumns() {
    // 给Row设置内在最小高度，先计算子项的最小高度需求
    Row(modifier = Modifier.height(IntrinsicSize.Min)) {
        BottomLeftLetterKey(columns = 2, rows = 2, Color.Blue)
        Spacer(modifier = Modifier.weight(1f))
        BottomLeftLetterKey(columns = 3, rows = 3, Color.Cyan)
    }
}

@Composable
fun BottomLeftLetterKey(columns: Int, rows: Int, color: Color) {
    Column(
        modifier = Modifier
            .background(color)
            .fillMaxHeight() // 填充Row确定后的内在高度
    ) {
        repeat(columns) {
            Row {
                repeat(rows) {
                    ElevatedButton(
                        onClick = { /*TODO*/ },
                        shape = RoundedCornerShape(4.dp),
                        colors = ButtonDefaults.elevatedButtonColors(
                            containerColor = Color.Green,
                            contentColor = Color.Red
                        ),
                        contentPadding = PaddingValues(0.dp)
                    ) {
                        Text(text = "2")
                    }
                }
            }
        }
    }
}

内容的提问来源于stack exchange，提问作者William Hu