Jetpack Compose中如何让短文本元素匹配同列内长文本的宽度

我完全get到你的需求了——你想让Column的宽度由最长的子元素（就是那行黄色的长文本）来决定，同时让短的青色文本刚好填满这个Column的宽度，而不是直接撑满整个屏幕。这个问题其实用Compose的固有尺寸测量就能完美解决，不用手动设固定宽度，全程自适应长文本的大小。

核心解决思路 #

给你的Column加上width(IntrinsicSize.Max)修饰符，这样Column会先提前测量所有子元素的宽度，把最宽的那个值作为自己的宽度。之后再给短文本加fillMaxWidth()，它就只会填充这个已经由长文本确定好的Column宽度，不会再把Column拉宽到屏幕边缘。

完整代码示例 #

@Composable
@Preview
fun Foo() = Column(
    Modifier
        .background(Color.Gray)
        .fillMaxHeight()
        .width(IntrinsicSize.Max) // 关键：让Column宽度由最宽子元素决定
) {
    // 长文本
    Text(
        text = "Looooooooooooooooooong text",
        modifier = Modifier
            .background(Color.Yellow)
            .padding(20.dp)
    )
    // 短文本
    Text(
        text = "Short text",
        modifier = Modifier
            .background(Color.Cyan)
            .padding(20.dp)
            .fillMaxWidth() // 现在只会填充Column的宽度，不会撑满屏幕
    )
}

为什么这个方法能解决问题？ #

你之前的写法之所以失效，是因为Column默认的测量逻辑是“适配子元素的最大宽度”：当你给短文本加fillMaxWidth()时，短文本会直接请求当前能拿到的最大可用宽度（也就是整个屏幕的宽度），导致Column也被强行拉宽到屏幕大小。

而width(IntrinsicSize.Max)会让Compose先做一次“预测量”：先算出所有子元素的宽度，把最宽的那个值固定为Column的宽度。等正式测量子元素时，短文本的fillMaxWidth()就只能填充这个已经确定好的Column宽度，不会再无限制扩展了。

这样一来，Column会完全自适应长文本的宽度，短文本也能完美匹配这个宽度，完全符合你想要的效果，而且全程不需要手动设置任何固定尺寸，响应式拉满~

内容来源于stack exchange