Jetpack Compose：文本溢出时如何让Text与Icon组件保持对齐？

核心需求是让Icon始终紧贴Text右侧：文本较短时Icon紧随其后，文本过长触发省略时Icon仍保留在屏幕内不被挤出。

最优实现方案 #

使用Row布局，给Text添加weight(1f, fill = false)修饰符，同时配置文本溢出规则：

Row(
    verticalAlignment = Alignment.CenterVertically,
    modifier = Modifier.fillMaxWidth()
) {
    Text(
        text = "这里是你的文本内容，可以是短文本也可以是非常长的文本内容用来测试溢出省略效果",
        maxLines = 1,
        overflow = TextOverflow.Ellipsis,
        modifier = Modifier
            .weight(1f, fill = false) // 关键设置：fill=false避免短文本强行占满宽度
    )
    Icon(
        imageVector = Icons.Default.ArrowForward,
        contentDescription = "图标描述"
    )
}

原理说明 #

• weight(1f)：确保文本过长时，Text会占据Row中除Icon外的所有可用空间，触发溢出省略逻辑。
• fill = false：让短文本仅占据自身所需宽度，不会强行撑满Row，保证Icon能紧贴在Text右侧。
• 配合maxLines = 1和overflow = TextOverflow.Ellipsis，确保长文本自动显示省略号。

备选方案：ConstraintLayout实现 #

如果需要更精细的布局约束，也可以用ConstraintLayout完成：

ConstraintLayout(modifier = Modifier.fillMaxWidth()) {
    val (text, icon) = createRefs()
    
    Text(
        text = "你的文本内容",
        maxLines = 1,
        overflow = TextOverflow.Ellipsis,
        modifier = Modifier.constrainAs(text) {
            start.linkTo(parent.start)
            end.linkTo(icon.start)
            top.linkTo(parent.top)
            bottom.linkTo(parent.bottom)
            width = Dimension.fillToConstraints // 文本填充到图标的起始位置
        }
    )
    
    Icon(
        imageVector = Icons.Default.ArrowForward,
        contentDescription = "图标描述",
        modifier = Modifier.constrainAs(icon) {
            end.linkTo(parent.end)
            top.linkTo(text.top)
            bottom.linkTo(text.bottom)
        }
    )
}

通过约束关系固定Icon在Row右侧，让Text自动填充Icon左侧的剩余空间，同样能满足两种场景的需求。

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