Jetpack Compose中长文本时让首个Text自动省略的问题解决

问题描述 #

当前使用Row包含两个Text组件，代码如下：

Row(
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp),
    verticalAlignment = Alignment.CenterVertically,
) {
    Text(
        text = "text1",
        maxLines = 1,
        overflow = TextOverflow.Ellipsis,
        modifier = Modifier.wrapContentWidth(),
    )
    Spacer(modifier = Modifier.width(4.dp))

    Text(
        text = "(text2)",
        maxLines = 1,
        modifier = Modifier.weight(1f),
    )
}

• 正常显示效果：两个文本并排完整展示
• 异常情况：当第一个Text内容过长时，第二个Text会被挤出显示区域，无法完整可见
• 期望效果：首个Text内容过长时自动显示省略号，同时第二个Text保持完整显示

修复方案 #

调整两个Text的Modifier配置，让第二个Text优先占据自身所需宽度，剩余空间分配给第一个Text，修改后代码如下：

Row(
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp),
    verticalAlignment = Alignment.CenterVertically,
) {
    Text(
        text = "text1",
        maxLines = 1,
        overflow = TextOverflow.Ellipsis,
        // 让第一个Text占据剩余所有可用空间
        modifier = Modifier.weight(1f)
    )
    Spacer(modifier = Modifier.width(4.dp))

    Text(
        text = "(text2)",
        maxLines = 1,
        // 第二个Text仅占据自身内容所需宽度，不抢占空间
        modifier = Modifier.wrapContentWidth()
    )
}

原理说明 #

• 原写法中，第一个Text使用wrapContentWidth()会尽可能占用所需空间，第二个Text的weight(1f)仅能分配第一个Text剩余的空间，当第一个文本过长时，会挤压第二个Text的空间导致其被挤出。
• 修改后，第二个Text用wrapContentWidth()固定自身宽度，第一个Text的weight(1f)会获取Row中除第二个Text和Spacer外的所有剩余空间，当内容超出这个空间时，就会触发TextOverflow.Ellipsis显示省略号，同时保证第二个Text始终完整显示。

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