使用 Jetpack Compose 构造环

I am learning Jetpack Compose and would like to build something like this

我尝试过通过堆叠使用框布局CircularProgressIndicator但需要对圆圈大小进行硬编码。我希望戒指与尺寸无关。 如何使用 Compose 实现此目的？

你可以尝试做Canvas。我这样做了，可以给你一个实现你想要的东西的起点......

@Composable
fun DrawGradientCircles() {
    Canvas(
        modifier = Modifier
            .size(300.dp)
            .background(Color.Gray)
    ) {
        drawCircle(
            brush = Brush.sweepGradient(listOf(Color.Magenta, Color.Red)),
            radius = 300f,
            style = Stroke(90f)
        )
        drawCircle(
            brush = Brush.sweepGradient(listOf(Color.Green, Color.Yellow)),
            radius = 200f,
            style = Stroke(90f)
        )
        drawCircle(
            brush = Brush.sweepGradient(listOf(Color.Cyan, Color.Blue)),
            radius = 100f,
            style = Stroke(90f)
        )
    }
}

这是结果：

EDIT:我在这里发布了更新版本：

https://gist.github.com/nglauber/e947dacf50155fb72408e83f6595e430 https://gist.github.com/nglauber/e947dacf50155fb72408e83f6595e430

希望能帮助到你。