如何在Jetpack Compose中实现一行放置三个文本且所有内容完整可见

核心实现逻辑是利用Row的weight修饰符分配空间：

• 首尾的标签、计数器组件不设置weight，会优先按照自身文本长度计算宽度，保证始终完整展示
• 中间的可变长度文本设置weight(1f)，占用两个固定组件之外的所有剩余宽度，空间不足时自动换行

完整示例代码 #

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun AdaptiveTextRow() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.spacedBy(8.dp) // 可自行调整组件间距
    ) {
        // 左侧标签 始终完整显示
        Text(text = "标签:")

        // 中间可变长度文本 空间不足时自动换行
        Text(
            text = "这里是长度不固定的文本内容，空间不足的时候我会自动换行，不会挤压左右两侧的组件",
            modifier = Modifier.weight(1f)
        )

        // 右侧计数器 始终完整显示
        Text(text = "1/10")
    }
}

效果参考 #

可选扩展：单行显示加省略号 #

如果需要中间文本最多展示1行，超出部分显示省略号，只需给中间Text新增两个参数即可：

Text(
    text = "这里是长度不固定的文本内容",
    modifier = Modifier.weight(1f),
    maxLines = 1,
    overflow = TextOverflow.Ellipsis
)

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