如何在Jetpack Compose的Row中实现文本自动截断并保留右侧按钮

要实现左侧文本自动截断、右侧工具按钮始终显示的效果，只需对Text组件做两处关键修改：

1. 给Text添加Modifier.weight(1f)，让它占据Row中除右侧按钮外的所有可用空间
2. 设置Text的overflow = TextOverflow.Ellipsis和maxLines = 1，确保文本过长时自动截断并显示省略号

修改后的完整代码：

Row(
    modifier = Modifier.fillMaxWidth(),
    verticalAlignment = Alignment.CenterVertically
)  {
    Text(
        text = "This a very long text text text text text text text text",
        modifier = Modifier.weight(1f),
        overflow = TextOverflow.Ellipsis,
        maxLines = 1
    )

    val iconModifier = Modifier.size(24.dp)

    IconButton(
        enabled = true,
        onClick = {}
    ) {
        Icon(Icons.Filled.Edit, null, modifier = iconModifier)
    }

    IconButton(
        enabled = true,
        onClick = {}
    ) {
        Icon(Icons.Filled.Delete, null, modifier = iconModifier)
    }

    IconButton(
        enabled = true,
        onClick = {}
    ) {
        Icon(Icons.Filled.ExpandMore, null, modifier = iconModifier)
    }
}

原理说明 #

• Modifier.weight(1f)：让Text优先占据Row中未被按钮占用的剩余空间，从根源避免文本挤压按钮区域
• TextOverflow.Ellipsis：指定文本超出可用空间时显示省略号，明确提示用户文本被截断
• maxLines = 1：限制文本仅显示一行，防止文本换行后继续挤占按钮的垂直空间

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