喷气背包组合中的扫掠渐变圆形进度条

我认为不可能给 CircularProgressIndicator 因为到目前为止 color 参数只接受 Color 我没有看到任何超载 Brush 颜色的类型。

实现你想要的一种方法是使用 Canvas 然而,一个简单的戒指是不够的。通过一些调整,您可以实现这一点:

@Composable
fun GradientProgress(
    modifier: Modifier = Modifier,
    diameter: Dp = 100.dp,
    width: Float = 10f,
    colors: List<Color> = listOf(Color.Cyan, Color.Blue),
    progress: Float = .75f
) {
    Box(
        content = {
            Text(
                text = "${(progress * 100).toInt()}",
                modifier = Modifier.align(Alignment.Center)
            )
            Canvas(
                modifier = modifier
                    .size(diameter)
                    .rotate(-90f)
                    .graphicsLayer {
                        rotationY = 360f
                    },
                onDraw = {
                    drawArc(
                        color = Color.LightGray,
                        startAngle = 0f,
                        sweepAngle = 360f,
                        false,
                        style = Stroke(width = width)
                    )
                    drawArc(
                        brush = Brush.sweepGradient(colors = colors),
                        startAngle = 0f,
                        sweepAngle = progress * 360f,
                        false,
                        style = Stroke(width = width)
                    )
                }
            )
        }
    )
}