Jetpack Compose：IntrinsicSize.Min致文本换行，求不用drawBehind的方案

问题重现 #

你原本想用Divider()在文本下方画线，但给Column设置Modifier.width(IntrinsicSize.Min)后，文本因为包含空格被强制换行，无法实现单行文本+下方分隔线的效果，原代码如下：

@Preview(showBackground = true)
@Composable
fun Example() {
Column(
     modifier = Modifier.width(IntrinsicSize.Min)
) {
    Text(text = "Jetpack Compose")
    Divider(
        color = Color.Red
    )
   }
}

不用drawBehind的解决方案 #

方案1：强制文本单行，移除Column的宽度限制

直接给Text添加maxLines = 1强制单行，同时去掉Column的IntrinsicSize.Min限制，这样Divider会自动匹配Text所在行的宽度：

@Preview(showBackground = true)
@Composable
fun FixedExample() {
    Column {
        Text(
            text = "Jetpack Compose",
            maxLines = 1,
            overflow = TextOverflow.Ellipsis // 可选，文本过长时显示省略号
        )
        Divider(color = Color.Red)
    }
}

方案2：用Box包裹，实现分隔线与文本同宽

如果需要分隔线宽度严格和文本一致（不占满父布局），可以用Box包裹Column，给Box设置IntrinsicSize.Min，同时强制Text单行：

@Preview(showBackground = true)
@Composable
fun FixedExample() {
    Box(Modifier.width(IntrinsicSize.Min)) {
        Column {
            Text(text = "Jetpack Compose", maxLines = 1)
            Divider(color = Color.Red)
        }
    }
}

方案3：给Divider设置对齐与宽度匹配

让Column保持原有宽度，给Divider添加align(Alignment.Start)和width(IntrinsicSize.Max)，确保它和Text宽度一致：

@Preview(showBackground = true)
@Composable
fun FixedExample() {
    Column(Modifier.width(IntrinsicSize.Min)) {
        Text(text = "Jetpack Compose", maxLines = 1)
        Divider(
            color = Color.Red,
            modifier = Modifier
                .align(Alignment.Start)
                .width(IntrinsicSize.Max)
        )
    }
}

原理说明 #

原代码中IntrinsicSize.Min会让Column尝试取最小宽度，而Text默认会在空格处换行来压缩宽度，导致文本变成两行。上述方案的核心都是强制文本保持单行，同时让Divider的宽度匹配文本的实际宽度，避免换行问题。

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