如何让Jetpack Compose中Row布局的最后一项始终可见？

需求描述 #

希望达成以下效果：

• 图标始终紧跟在文本后方显示
• 当容器空间不足时，文本自动换行显示为两行，图标仍保持可见

现有代码 #

Box(
    modifier = Modifier
        .width(180.dp)
        //.width(50.dp)
        .height(50.dp)
        .background(Color.LightGray)
) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.Start
    ) {
        Text(
            text = "lorem ipsum",
            maxLines = 2,
            overflow = TextOverflow.Ellipsis,
        )

        Icon(
            Icons.Default.AccountBox,
            tint = Color.Black,
            modifier = Modifier
                .padding(8.dp)
                .size(24.dp)
        )
    }
}

效果示例 #

实现思路与修改方案 #

核心思路 #

让文本优先占据容器内除图标外的剩余空间，确保图标有固定的显示空间，文本则根据剩余空间自动换行。

最简修改方案（Row + Weight） #

给Text组件添加weight(1f)修饰符，让它占据Row内的剩余空间，图标保持固定尺寸：

Box(
    modifier = Modifier
        .width(180.dp) // 切换为50.dp可测试空间不足场景
        .height(50.dp)
        .background(Color.LightGray)
) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.Start
    ) {
        Text(
            text = "lorem ipsum",
            maxLines = 2,
            overflow = TextOverflow.Ellipsis,
            modifier = Modifier.weight(1f) // 关键：让文本占据剩余空间
        )

        Icon(
            Icons.Default.AccountBox,
            tint = Color.Black,
            modifier = Modifier
                .padding(start = 8.dp) // 调整间距避免文本与图标紧贴
                .size(24.dp)
        )
    }
}

其他可选方案 #

• ConstraintLayout约束布局：通过约束将图标的start与文本的end绑定，同时设置文本的start和end约束到容器边缘（预留图标的宽度），适合复杂布局场景。
• 自定义Layout：如果需要更精细的控制，可以自定义Layout组件，手动测量文本和图标的尺寸，计算文本的可用宽度，确保图标始终显示在文本末尾。

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