在height(IntrinsicSize.Max)容器中width/widthIn修饰符致内容裁剪的原因？

需求与问题 #

需求如下：

• Composable需根据内容自适应高度，不能使用固定高度
• 存在一个绿色项，高度随内容自适应
• 一个或多个可变高度的项需设置固定宽度

编写的代码如下：

@Composable
private fun Problem() {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .height(IntrinsicSize.Max)
    ) {
        Column(
            modifier = Modifier
                .background(Color.Green)
        ) {
            Spacer(
                modifier = Modifier
                    .width(40.dp)
                    .fillMaxHeight()
            )
        }
        Column(
            Modifier
                .fillMaxWidth()
                .background(Color.White)
        ) {
            Text(
                modifier = Modifier.background(Color.Red),
                color = Color.White,
                text = "XAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAX"
            )
            Text(
                modifier = Modifier
                    .background(Color.Blue)
                    .width(150.dp),
                color = Color.White,
                text = "XBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBX"
            )
        }
    }
}

运行后发现，当在height(IntrinsicSize.Max)容器内的组件设置固定宽度时，最后一项（蓝色Text）的内容被裁剪。

原因分析 #

这并非Compose的Bug，而是IntrinsicSize.Max的测量逻辑导致的：

1. 当给Row设置height(IntrinsicSize.Max)时，Compose会先执行固有尺寸测量：让所有子项在无高度约束的前提下，计算自身的固有高度。
2. 此时右侧Column内的第二个Text虽然设置了width(150.dp)，但在固有高度测量阶段，它的宽度约束是Constraints.Infinity（无限宽），因此Text会以单行形式计算高度（高度很小）。
3. Row会将所有子项的最大固有高度作为自身的固定高度，这里就是右侧Column在固有测量时的高度（单行Text的高度加上第一个Text的高度）。
4. 进入实际布局阶段时，第二个Text被应用width(150.dp)约束，需要换行显示，实际高度远大于固有测量时的高度，但Row的高度已经被固定，导致内容被裁剪。

解决方案 #

移除Row的height(IntrinsicSize.Max)，转而给绿色Column添加height(IntrinsicSize.Max)，让绿色Column的高度自动匹配Row的高度（Row的高度由右侧Column的实际内容高度决定）。修改后的代码如下：

@Composable
private fun FixedProblem() {
    Row(
        modifier = Modifier.fillMaxWidth()
    ) {
        Column(
            modifier = Modifier
                .background(Color.Green)
                .height(IntrinsicSize.Max) // 让绿色Column高度匹配Row高度
        ) {
            Spacer(
                modifier = Modifier
                    .width(40.dp)
                    .fillMaxHeight()
            )
        }
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .background(Color.White)
        ) {
            Text(
                modifier = Modifier.background(Color.Red),
                color = Color.White,
                text = "XAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAX"
            )
            Text(
                modifier = Modifier
                    .background(Color.Blue)
                    .width(150.dp),
                color = Color.White,
                text = "XBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBX"
            )
        }
    }
}

原理说明 #

• Row默认采用wrapContentHeight，会根据右侧Column的实际内容高度自动调整自身高度，确保所有内容都能完整显示。
• 绿色Column的height(IntrinsicSize.Max)会让它填充Row的整个高度，满足“随内容高度自适应”的需求。
• 右侧Column内的固定宽度Text会在实际布局阶段正确计算换行后的高度，不会被裁剪。

内容的提问来源于stack exchange，提问作者Eduardo Naveda