Jetpack Compose Text组件inlineContent配合TextOverflow.Ellipsis失效问题

问题描述 #

在实现带时间戳的Text组件时，使用inlineContent方案在无溢出时显示正常，但设置overflow = TextOverflow.Ellipsis和maxLines后，时间戳会被完全截断，仅显示省略号。场景中存在内容宽度限制，文本长度不固定。

问题原因 #

Compose的Text组件处理文本省略时，会将inlineContent的占位符视为普通文本内容的一部分。当主文本占满允许的最大行数后，省略逻辑会直接截断包括时间戳占位符在内的所有后续内容，导致时间戳无法显示。

解决方案 #

放弃inlineContent方案，改用Row布局分离主文本和时间戳，让主文本占据剩余宽度并处理省略，时间戳固定显示在右侧。这种方式逻辑更清晰，且能保证时间戳始终可见。

修改后的代码实现 #

@Composable
fun TextWithTimestamp(
    text: String,
    timestamp: String,
    maxLines: Int,
    modifier: Modifier = Modifier,
) {
    Row(
        modifier = modifier,
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(4.dp)
    ) {
        // 主文本占据剩余宽度，自动处理省略
        Text(
            text = text,
            color = Color.White,
            maxLines = maxLines,
            overflow = TextOverflow.Ellipsis,
            modifier = Modifier.weight(1f)
        )
        // 时间戳固定显示在右侧
        Text(
            text = timestamp,
            color = Color.Yellow,
            fontSize = 14.sp,
            textAlign = TextAlign.Center
        )
    }
}

@Preview(widthDp = 200)
@Composable
private fun PreviewTextWithTimestamp() {
    Column(
        modifier = Modifier
            .padding(16.dp)
            .border(1.dp, Color.Green)
    ) {
        TextWithTimestamp(
            text = "MedalParrot, MedalPanda, MedalCarrot and 83+ liked your clip!",
            timestamp = "1h",
            maxLines = 2,
        )
        Divider(color = Color.Green)
        TextWithTimestamp(
            text = "MedalParrot, MedalPanda, MedalCarrot and 83+ liked your clip!",
            timestamp = "1h",
            maxLines = 3,
        )
    }
}

效果说明 #

• 主文本通过Modifier.weight(1f)获取剩余宽度，当内容超出maxLines时自动显示省略号
• 时间戳始终固定在主文本右侧，不受省略逻辑影响
• 布局逻辑简单直观，避免了inlineContent与省略逻辑的兼容性问题

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