使用 Jetpack Compose 构建环 [英] Construct Rings using Jetpack Compose

问题描述

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

我尝试通过堆叠 CircularProgressIndicator 来使用 Box 布局，但需要对圆圈大小进行硬编码.我希望戒指的尺寸不可知.我如何使用 Compose 实现这一目标?

解决方案

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

@Composable有趣的 DrawGradientCircles() {帆布(修饰符 = 修饰符.size(300.dp).background(颜色.灰色)){画圆(Brush = Brush.sweepGradient(listOf(Color.Magenta, Color.Red)),半径 = 300f，样式 = 笔画(90f))画圆(Brush = Brush.sweepGradient(listOf(Color.Green, Color.Yellow)),半径 = 200f，样式 = 笔画(90f))画圆(Brush = Brush.sweepGradient(listOf(Color.Cyan, Color.Blue)),半径 = 100f，样式 = 笔画(90f))}}

结果如下:

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

希望有帮助.

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

I have tried using Box layout by stacking CircularProgressIndicator but requires hardcoding the circle sizes. I want the rings to be size agnostic. How do I achieve this using Compose?

解决方案

You can try to do with Canvas. I did this and could give you a start point to achieve what you want...

@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)
        )
    }
}

This is the result:

EDIT: I posted an updated version here:

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

Hope it helps.

这篇关于使用 Jetpack Compose 构建环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！