Jetpack Compose：如何设置Row高度为wrap_content并让Column等高？

目标UI结构 #

• Box（固定高度300dp）
  • Row（高度自适应内容，与Column_2高度一致）
    • Column_1（需和Column_2等高）
    • Spacer（固定宽度）
    • Column_2（包含5个文本标签，高度由内容决定）

已解决问题：让Row高度自适应内容 #

初始代码问题 #

初始代码中，Row被撑满了父Box的300dp高度，原因是Column_1和Spacer都设置了fillMaxHeight()，强制占满Row的高度，导致Row不得不拉伸到Box的高度。

@Composable
fun ColumnTest() {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(300.dp)
    ) {
        Row(
            modifier = Modifier
                .background(Color.Cyan)
                .padding(horizontal = 12.dp)
                .wrapContentHeight(align = Alignment.Top)
        ) {
            Column(
                modifier = Modifier
                    .width(40.dp)
                    .fillMaxHeight() // 强制占满Row高度
                    .background(color = Color.Green)
            ) { }

            Spacer(
                modifier = Modifier
                    .width(10.dp)
                    .fillMaxHeight() // 强制占满Row高度
                    .background(Color.Yellow)
            )

            Column(
                modifier = Modifier
                    .background(Color.Magenta)
                    .fillMaxWidth()
            ) {
                ChatText("Label 1")
                ChatText("Label 2")
                ChatText("Label 3")
                ChatText("Label 4")
                ChatText("Label 5")
            }
        }
    }
}

修改后的解决代码 #

去掉Column_1和Spacer的fillMaxHeight()，Row就会自动根据Column_2的内容高度自适应：

@Composable
fun ColumnTest() {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(300.dp)
    ) {
        Row(
            modifier = Modifier
                .background(Color.Cyan)
                .padding(horizontal = 12.dp)
                .wrapContentHeight(align = Alignment.Top)
        ) {
            Column(
                modifier = Modifier
                    .width(40.dp)
                    .background(Color.Green)
            ) {
                Text("A")
            }

            Spacer(
                modifier = Modifier
                    .width(10.dp)
                    .background(Color.Yellow)
            )

            Column(
                modifier = Modifier
                    .background(Color.Magenta)
                    .fillMaxWidth()
            ) {
                ChatText("Label 1")
                ChatText("Label 2")
                ChatText("Label 3")
                ChatText("Label 4")
                ChatText("Label 5")
            }
        }
    }
}

当前问题：让Column_1与Column_2高度完全一致 #

现在Row已经能自适应Column_2的高度，但Column_1的高度仅由自身内容决定，想要让它和Column_2等高，不想用mutableState配合onGloballyPositioned的复杂方案，求更直接的实现方式。

最优解决方案：利用固有尺寸（Intrinsic Size） #

Jetpack Compose提供了固有尺寸测量的API，可以让Row先测量子元素的最大固有高度（这里就是Column_2的高度），然后让Column_1填充这个高度。具体改动如下：

1. 给Row添加height(IntrinsicSize.Min)，让Row根据子元素的最小固有高度来确定自身高度；
2. 给Column_1设置fillMaxHeight()，此时它会填充Row的高度（也就是Column_2的高度）。

修改后的完整代码 #

@Composable
fun ColumnTest() {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(300.dp)
    ) {
        Row(
            modifier = Modifier
                .background(Color.Cyan)
                .padding(horizontal = 12.dp)
                .height(IntrinsicSize.Min) // 关键：让Row基于子元素固有高度布局
        ) {
            Column(
                modifier = Modifier
                    .width(40.dp)
                    .fillMaxHeight() // 填充Row的高度，即和Column_2等高
                    .background(Color.Green)
            ) {
                // 可以留空或添加内容，高度都会和Column_2一致
            }

            Spacer(
                modifier = Modifier
                    .width(10.dp)
                    .fillMaxHeight() // 同样填充Row高度
                    .background(Color.Yellow)
            )

            Column(
                modifier = Modifier
                    .background(Color.Magenta)
                    .fillMaxWidth()
            ) {
                ChatText("Label 1")
                ChatText("Label 2")
                ChatText("Label 3")
                ChatText("Label 4")
                ChatText("Label 5")
            }
        }
    }
}

原理说明 #

IntrinsicSize.Min会让Row先执行一次“预测量”，计算所有子元素的最小固有高度（这里Column_2的高度就是这个最小值），然后Row的高度就设为这个值。之后Column_1和Spacer的fillMaxHeight()就会填充这个预测量出来的高度，从而实现和Column_2等高的效果。

内容的提问来源于stack exchange，提问作者LiuWenbin_NO.