Jetpack Compose Android：进度条填充时如何改变文本颜色

可以通过两种实用方案实现该效果，核心是让文本的颜色显示范围跟随进度条填充进度同步变动：

方案一：裁剪式纯色切换 #

利用Modifier.drawWithContent结合clipRect，根据进度裁剪文本显示区域，未填充区域显示一种颜色，填充区域显示目标颜色，适合两种纯色切换的场景。

@Composable
fun ProgressText(
    progress: Float, // 取值范围0f-1f
    text: String,
    filledColor: Color = Color.Green,
    unfilledColor: Color = Color.Gray,
    textStyle: TextStyle = TextStyle(fontSize = 24.sp)
) {
    Box(contentAlignment = Alignment.Center) {
        // 底层显示未填充状态的文本
        Text(
            text = text,
            style = textStyle.copy(color = unfilledColor)
        )
        // 上层显示填充状态的文本，根据进度裁剪显示范围
        Text(
            text = text,
            style = textStyle.copy(color = filledColor),
            modifier = Modifier
                .drawWithContent {
                    val progressWidth = size.width * progress.coerceIn(0f, 1f)
                    clipRect(right = progressWidth) {
                        this@drawWithContent.drawContent()
                    }
                }
        )
    }
}

使用时直接绑定进度状态即可：

var progress by remember { mutableStateOf(0.5f) }
ProgressText(progress = progress, text = "50%")

方案二：动态渐变过渡 #

如果需要颜色渐变过渡的效果，可通过Brush.horizontalGradient动态调整渐变分界点，让分界位置跟随进度移动。

@Composable
fun GradientProgressText(
    progress: Float,
    text: String,
    filledColor: Color = Color.Green,
    unfilledColor: Color = Color.Gray,
    textStyle: TextStyle = TextStyle(fontSize = 24.sp)
) {
    val gradientBrush = Brush.horizontalGradient(
        colors = listOf(filledColor, unfilledColor),
        // 渐变分界点随进度移动，确保在0f-1f范围内
        stop = progress.coerceIn(0f, 1f)
    )

    Text(
        text = text,
        style = textStyle.copy(brush = gradientBrush)
    )
}

关键提示 #

• 进度值建议用coerceIn(0f, 1f)做边界处理，避免超出范围导致显示异常
• 若与进度条组件配合，直接绑定进度条的状态变量即可实现完全同步

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