Jetpack Compose中未指定maxLines时TextOverflow.Ellipsis不生效问题

生效原理说明 #

Jetpack Compose 中的TextOverflow.Ellipsis省略号效果，必须搭配行数限制参数maxLines才能生效，这是官方预设的逻辑：

• 默认情况下Text的maxLines值为Int.MAX_VALUE，意味着文本会无限换行，只要内容足够多就会持续撑开高度，哪怕父布局有固定高度限制，Text也只会被父布局裁剪掉超出部分，不会主动触发省略号逻辑。
• 只有当你指定了maxLines，文本行数达到你设定的上限后，overflow = TextOverflow.Ellipsis才会生效，在末尾追加省略号。

场景对应的效果如下：

• 设置maxLines = 2时，刚好匹配内层带padding的Card可容纳的文本行数，省略号正常展示：
  
• 设置maxLines = 3或者不设置maxLines时，设定的行数超过了容器可容纳的最大行数，Text会先尝试展示更多行，超出容器的部分直接被裁剪，不会出现省略号：
  

解决方案 #

方案1：固定行数（推荐，性能最优） #

如果明确知道容器最多可以展示多少行文本，直接给Text指定对应的maxLines值即可，符合官方最佳实践，参考代码如下：

@Composable
fun CardWithText() {
    Card(
        modifier = Modifier
            .height(60.dp)
            .width(100.dp)
            .border(1.dp, Color.Black, RoundedCornerShape(0))
    ) {
        Card(
            modifier = Modifier
                .padding(8.dp)
                .fillMaxSize()
                .border(1.dp, Color.Black, RoundedCornerShape(0))
        ) {
            Text(
                text = "One two three four five six seven eight nine ten eleven twelve",
                maxLines = 2,
                overflow = TextOverflow.Ellipsis,
                color = Color.Black
            )
        }
    }
}

方案2：动态计算行数（适配未知高度容器） #

如果容器高度不固定，无法提前确定最大行数，可以通过onTextLayout回调动态计算当前容器可容纳的最大行数，再更新maxLines，自定义组件参考如下：

@Composable
fun AutoEllipsisText(
    text: String,
    modifier: Modifier = Modifier,
    overflow: TextOverflow = TextOverflow.Ellipsis,
    color: Color = Color.Black
) {
    var maxLines by remember { mutableStateOf(Int.MAX_VALUE) }
    Text(
        text = text,
        modifier = modifier,
        maxLines = maxLines,
        overflow = overflow,
        color = color,
        onTextLayout = { textLayoutResult ->
            if (textLayoutResult.hasVisualOverflow) {
                maxLines = textLayoutResult.lineCount - 1
            }
        }
    )
}

将原有场景中的Text替换为上述AutoEllipsisText组件即可，无需手动指定maxLines也能自动触发省略号效果。

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