Jetpack Compose：Text父容器（Row→Box）自适应内容并保留最小内边距

我需要让Jetpack Compose里Text组件的父容器（Row嵌套在Box中）自适应包裹Text内容，保持最小内边距。目前长文本已经能自动换行，但Text和Row右边缘之间有多余空白。希望在尽量少改容器层级的前提下，动态把内边距调到最小。

当前代码：

@Composable
fun ChatMessageExample() {
    Box(
        modifier = Modifier
            .padding(16.dp)
            .clip(RoundedCornerShape(topStart = 18.dp, topEnd = 18.dp, bottomStart = 18.dp, bottomEnd = 0.dp))
            .background(color = Color.LightGray)
    ) {
        Row(
            modifier = Modifier
                .padding(top = 12.dp, bottom = 12.dp, start = 16.dp, end = 16.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(
                modifier = Modifier.padding(end = 4.dp),
                text = "I want to make sure the width is correctlyAdjusted with text.",
                style = TextStyle(
                    fontSize = 18.sp,
                    fontWeight = FontWeight.Normal,
                    lineHeight = 26.sp),
                overflow = TextOverflow.Clip,
                softWrap = true
            )
        }
    }
}

更新：该问题已有官方问题跟踪记录。

解决方案 #

问题根源在于Row默认会尽可能占据可用宽度，加上Text未限制最大宽度，导致容器右侧出现多余空白。以下两种方案可解决问题：

方案1：给Row添加固有尺寸限制

通过width(IntrinsicSize.Min)让Row仅占据内容所需的最小宽度，适配Text的实际宽度：

@Composable
fun ChatMessageExample() {
    Box(
        modifier = Modifier
            .padding(16.dp)
            .clip(RoundedCornerShape(topStart = 18.dp, topEnd = 18.dp, bottomStart = 18.dp, bottomEnd = 0.dp))
            .background(color = Color.LightGray)
    ) {
        Row(
            modifier = Modifier
                .width(IntrinsicSize.Min) // 新增：限制Row宽度为内容最小宽度
                .padding(top = 12.dp, bottom = 12.dp, start = 16.dp, end = 16.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(
                modifier = Modifier.padding(end = 4.dp),
                text = "I want to make sure the width is correctlyAdjusted with text.",
                style = TextStyle(
                    fontSize = 18.sp,
                    fontWeight = FontWeight.Normal,
                    lineHeight = 26.sp),
                overflow = TextOverflow.Clip,
                softWrap = true
            )
        }
    }
}

方案2：移除冗余Row容器

如果Row内只有Text一个元素，直接用Box承载Text即可，减少不必要的层级：

@Composable
fun ChatMessageExample() {
    Box(
        modifier = Modifier
            .padding(16.dp)
            .clip(RoundedCornerShape(topStart = 18.dp, topEnd = 18.dp, bottomStart = 18.dp, bottomEnd = 0.dp))
            .background(color = Color.LightGray)
            .padding(top = 12.dp, bottom = 12.dp, start = 16.dp, end = 16.dp)
    ) {
        Text(
            text = "I want to make sure the width is correctlyAdjusted with text.",
            style = TextStyle(
                fontSize = 18.sp,
                fontWeight = FontWeight.Normal,
                lineHeight = 26.sp),
            overflow = TextOverflow.Clip,
            softWrap = true
        )
    }
}

补充说明

若后续需要在Row内添加图标等其他元素，优先选择方案1。IntrinsicSize.Min会先测量子元素的最小宽度需求，再让Row自身适配该宽度，彻底消除右侧多余空白。

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