Jetpack Compose：避免Row布局中两个TextView被挤压至完全不可见

你需要实现两个Text组件在Row中相向扩展占满空间，文本过长时显示省略号，且任一组件不能完全不可见。原代码的问题在于使用Arrangement.SpaceBetween时，长文本会直接挤压另一个组件到消失，单纯添加weight属性又会破坏短文本时的布局效果。

核心解决方案思路 #

要兼顾两种场景：

1. 文本较短时，允许其中一个组件占据大部分空间（保持原需求的布局灵活性）
2. 文本过长时，限制两个组件的最小宽度，避免被完全挤压，同时平分剩余空间显示省略号

静态最小宽度实现方案 #

通过给每个Text添加weight(1f, fill = false)和minWidth约束来实现：

@Composable
fun InfoRow(
    value: String,
    label: String?,
    modifier: Modifier = Modifier,
    minTextWidth: Dp = 40.dp // 可根据需求调整最小宽度
) {
    Row(
        modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {
        label?.let {
            Text(
                text = it,
                overflow = TextOverflow.Ellipsis,
                maxLines = 1,
                style = MaterialTheme.typography.body1,
                modifier = Modifier
                    .weight(1f, fill = false)
                    .minWidth(minTextWidth)
            )
        }

        Text(
            text = value,
            modifier = Modifier
                .padding(top = 10.dp, bottom = 10.dp, end = 10.dp)
                .weight(1f, fill = false)
                .minWidth(minTextWidth),
            style = MaterialTheme.typography.button,
            overflow = TextOverflow.Ellipsis,
            maxLines = 1,
        )
    }
}

关键代码说明

• weight(1f, fill = false)：fill=false让Text先按照自身内容的宽度布局，剩余空间再按weight比例分配。这样短文本时不会强制平分空间，长文本时会平分剩余空间，避免一方被完全挤压。
• minWidth：固定最小宽度，确保无论对方文本多长，当前Text至少能显示一部分内容，不会完全消失。

动态最小宽度实现方案（更灵活） #

如果需要根据文本内容动态计算最小宽度（比如确保至少显示3个字符），可以使用TextMeasurer测量指定字符数的宽度：

@Composable
fun InfoRow(
    value: String,
    label: String?,
    modifier: Modifier = Modifier,
    minVisibleChars: Int = 3 // 至少显示的字符数量
) {
    val textMeasurer = rememberTextMeasurer()

    // 计算label的最小宽度（至少显示minVisibleChars个字符）
    val labelMinWidth = label?.let {
        val sampleText = it.take(minVisibleChars).padEnd(minVisibleChars, ' ')
        textMeasurer.measure(
            text = sampleText,
            style = MaterialTheme.typography.body1
        ).size.width.toDp()
    } ?: 0.dp

    // 计算value的最小宽度
    val valueMinWidth = run {
        val sampleText = value.take(minVisibleChars).padEnd(minVisibleChars, ' ')
        textMeasurer.measure(
            text = sampleText,
            style = MaterialTheme.typography.button
        ).size.width.toDp()
    }

    Row(
        modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {
        label?.let {
            Text(
                text = it,
                overflow = TextOverflow.Ellipsis,
                maxLines = 1,
                style = MaterialTheme.typography.body1,
                modifier = Modifier
                    .weight(1f, fill = false)
                    .minWidth(labelMinWidth)
            )
        }

        Text(
            text = value,
            modifier = Modifier
                .padding(top = 10.dp, bottom = 10.dp, end = 10.dp)
                .weight(1f, fill = false)
                .minWidth(valueMinWidth),
            style = MaterialTheme.typography.button,
            overflow = TextOverflow.Ellipsis,
            maxLines = 1,
        )
    }
}

方案优势

动态计算的最小宽度会适配当前文本的字体样式（大小、字重等），确保显示的最小字符数一致，比固定dp更灵活准确。

效果验证 #

• 当label或value文本较短时，组件会按自身宽度布局，剩余空间留给另一方，符合“占据大部分空间”的需求
• 当任一文本过长时，两个组件会平分剩余空间，各自显示省略号，且不会被完全挤压消失

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