使用 Jetpack Compose 构造环

Question

我正在学习 Jetpack Compose，想构建这样的东西

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

Answer 1

你可以尝试用 来做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)
        )
    }
}

这是结果：

编辑：我在这里发布了更新版本：

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

希望能帮助到你。