Android Jetpack Compose：如何在TopAppBar的Row中实现宽度可变与固定内容的Text布局

我明白你遇到的困扰了——在TopAppBar的Row容器里，既要让内容长度可变的Text能自适应空间、超出时自动省略，又要确保固定内容的Text始终完整显示，硬编码最大宽度的方式在竖屏还行，但到了横屏或平板这类大屏设备就容易出问题。不用依赖外部库，用Compose内置的布局修饰符就能完美解决这个问题。

问题根源分析 #

你之前给第一个Text设置固定maxWidth=210.dp，这种硬编码的方式无法适配不同屏幕的宽度：

• 竖屏空间有限时，这个限制能让Text收缩并显示省略号，看起来正常；
• 横屏或平板空间充足时，这个固定限制会浪费可用空间，导致布局显得松散；
• 极端情况下，如果固定Text的宽度意外超过剩余空间，还可能被挤压截断。

最优解决方案：利用weight修饰符实现自适应布局 #

核心思路是让可变内容的Text占据Row中除固定Text之外的所有可用空间，固定Text只占用自身内容所需的宽度。具体代码修改如下：

@Composable
fun AppBarTestScreen() {
    Column {
        TopAppBar(
            title = {
                Row(Modifier.fillMaxWidth()) {
                    // 可变内容的Text：占据剩余所有可用空间
                    Text(
                        text = "\"〇〇〇〇〇〇\"",
                        modifier = Modifier
                            .weight(1f)
                            .wrapContentWidth(),
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis,
                        softWrap = false
                    )
                    // 固定内容的Text：仅占用自身内容宽度，确保始终完整显示
                    Text(
                        text = "\"'s Attribute\"",
                        modifier = Modifier.wrapContentWidth(),
                        textAlign = TextAlign.Start,
                        softWrap = false
                    )
                }
            }
        )
        // ... 你的其他界面内容
    }
}

方案优势 #

1. 全屏幕适配：不管是手机竖屏、横屏还是平板设备，固定Text都会完整显示，可变Text自动填充剩余空间；
2. 自动截断省略：当可变Text内容超过可用空间时，会自动显示省略号，不会挤压固定Text；
3. 无硬编码限制：不需要依赖固定的宽度数值，完全基于布局自身的空间分配逻辑，更可靠灵活。

可选优化：限制可变Text的最大宽度 #

如果你担心大屏设备上可变Text太宽影响视觉效果，可以给它添加widthIn(max = ...)修饰符，限制其最大显示宽度，比如：

Text(
    text = "\"〇〇〇〇〇〇\"",
    modifier = Modifier
        .weight(1f)
        .widthIn(max = 300.dp) // 根据你的设计需求调整最大宽度
        .wrapContentWidth(),
    maxLines = 1,
    overflow = TextOverflow.Ellipsis,
    softWrap = false
)

这样在空间充足时，可变Text最多占用设定的最大宽度，剩余空间会自然留白，同时依然保证固定Text完整显示。

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