在Compose中实现ColorTrackText类型文本效果是否可行

在Jetpack Compose中完全可以实现你需要的分段着色文本效果，这类效果常应用于歌词滚动、进度同步高亮等场景，核心实现逻辑如下：

实现原理 #

• 通过Compose的自定义绘制能力对同一段文本执行两次绘制，分别对应默认色和高亮色
• 用进度参数控制高亮色文本的裁剪范围，最终呈现出部分文本变色的效果
• 可自定义着色方向、颜色渐变等扩展能力，适配不同业务需求

核心实现代码示例 #

@Composable
fun ColorTrackText(
    text: String,
    modifier: Modifier = Modifier,
    progress: Float = 0f,
    defaultColor: Color = Color.Gray,
    trackColor: Color = Color.Red,
    style: TextStyle = LocalTextStyle.current
) {
    val textLayoutResult = remember { mutableStateOf<TextLayoutResult?>(null) }
    Text(
        text = text,
        color = defaultColor,
        style = style,
        modifier = modifier.drawWithContent {
            // 绘制全量默认色文本
            drawContent()
            textLayoutResult.value?.let { layoutResult ->
                val trackWidth = layoutResult.size.width * progress.coerceIn(0f, 1f)
                // 裁剪高亮区域绘制高亮色文本
                clipRect(right = trackWidth) {
                    drawText(
                        textLayoutResult = layoutResult,
                        color = trackColor
                    )
                }
            }
        },
        onTextLayout = {
            textLayoutResult.value = it
        }
    )
}

使用示例 #

@Composable
fun UsageDemo() {
    // progress可随业务逻辑动态更新，比如播放进度、下载进度
    var progress by remember { mutableStateOf(0.6f) }
    ColorTrackText(
        text = "示例文本：这是一段测试ColorTrack效果的内容",
        progress = progress,
        style = TextStyle(fontSize = 22.sp, fontWeight = FontWeight.Medium)
    )
}

效果展示 #

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