如何在Jetpack Compose中设计一个多圆形进度条？

Question

我试图使用Jetpack Compose设计一个显示多个进度的进度条，但我没有找到任何库或帮助材料。虽然我能够设计单个进度条，但我需要像这样设计：

- Salman Hameed

Answer 1

只需在 Box 中使用多个 CircularProgressIndicator：

Box(contentAlignment = Alignment.Center) {
    CircularProgressIndicator(
        progress = 0.45f,
        color = Red,
        modifier = Modifier.then(Modifier.size(60.dp)))
    CircularProgressIndicator(
        progress = 0.55f,
        color = Green,
        modifier = Modifier.then(Modifier.size(80.dp)))
    CircularProgressIndicator(
        progress = 0.75f,
        color = Blue,
        modifier = Modifier.then(Modifier.size(100.dp)))
}

如果您想绘制从 M2 1.4.0-alpha04 和 M3 1.1.0-alpha04 开始的圆形轨迹，您可以使用trackColor参数：

CircularProgressIndicator(
    //...
    trackColor = LightGray
)

如果您想在发布之前绘制圆形轨道，可以使用Canvas + CircularProgressIndicator构建自定义的可组合项。
类似于：

   val stroke = with(LocalDensity.current) {
    Stroke(width = ProgressIndicatorDefaults.StrokeWidth.toPx(), cap = StrokeCap.Butt)
   }

    Canvas(modifier = Modifier.size(60.dp)){
        val diameterOffset = stroke.width / 2
        drawCircle(
            radius = size.minDimension / 2.0f-diameterOffset,
            color= LightGray,style = stroke)
    }
    CircularProgressIndicator(
        progress = 0.45f,
        color = Red,
        modifier = Modifier.then(Modifier.size(60.dp)))

- Gabriele Mariotti