当进度条填充 jetpack Compose Android 时更改文本颜色

Question

如何在jetpack Compose Android中随着进度条填充而更改文本的颜色

在此输入图像描述

我确实尝试了所有渐变以及在互联网上搜索，但没有结果

Answer 1

您可以使用 BlendModes 轻松地做到这一点

Box(
    modifier = Modifier
        .border(2.dp, Color.Gray, RoundedCornerShape(8.dp))
        .clip(RoundedCornerShape(8.dp))
        .fillMaxWidth()
        .drawWithContent {
            with(drawContext.canvas.nativeCanvas) {
                val checkPoint = saveLayer(null, null)

                // Destination
                drawContent()

                // Source
                drawRect(
                    color = Color.Gray,
                    size = Size(size.width * progress, size.height),
                    blendMode = BlendMode.SrcOut
                )
                restoreToCount(checkPoint)
            }
        }
        .padding(12.dp),
    contentAlignment = Alignment.Center
) {
    Text(text = "Video starting in 3 seconds", color = Color.Gray, fontSize = 20.sp)
}

只需分配一个进度参数并为其设置动画即可。我做了一个完整的实现

@Preview
@Composable
private fun ColorProgressBar() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(10.dp)
    ) {

        var target by remember {
            mutableStateOf(0f)
        }

        val progress by animateFloatAsState(
            targetValue = target,
            animationSpec = tween(durationMillis = 3000, easing = LinearEasing)
        )
        Button(
            modifier = Modifier.fillMaxWidth(),
            onClick = {
                target = if (target == 0f) 1f else 0f
            }) {
            Text("Start")
        }
        Spacer(modifier = Modifier.height(20.dp))

        Box(
            modifier = Modifier
                .border(2.dp, Color.Gray, RoundedCornerShape(8.dp))
                .clip(RoundedCornerShape(8.dp))
                .fillMaxWidth()
                .drawWithContent {
                    with(drawContext.canvas.nativeCanvas) {
                        val checkPoint = saveLayer(null, null)

                        // Destination
                        drawContent()

                        // Source
                        drawRect(
                            color = Color.Gray,
                            size = Size(size.width * progress, size.height),
                            blendMode = BlendMode.SrcOut
                        )
                        restoreToCount(checkPoint)
                    }
                }
                .padding(12.dp),
            contentAlignment = Alignment.Center
        ) {
            Text(text = "Video starting in 3 seconds", color = Color.Gray, fontSize = 20.sp)
        }

        Spacer(modifier = Modifier.height(20.dp))

        Box(
            modifier = Modifier
                .border(2.dp, Color.Gray, RoundedCornerShape(8.dp))
                .clip(RoundedCornerShape(8.dp))
                .fillMaxWidth()
                .drawWithContent {
                    with(drawContext.canvas.nativeCanvas) {
                        val checkPoint = saveLayer(null, null)

                        // Destination
                        drawContent()

                        // Source
                        drawRect(
                            color = Color.Gray,
                            size = Size(size.width * progress, size.height),
                            blendMode = BlendMode.Xor
                        )
                        restoreToCount(checkPoint)
                    }
                }
                .padding(12.dp),
            contentAlignment = Alignment.Center
        ) {
            Text(text = "${(progress * 100).toInt()}%", color = Color.Gray, fontSize = 20.sp)
        }
    }
}