使用 Jetpack Compose 构造环

Question

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

我尝试通过堆叠 CircularProgressIndicator 使用 Box 布局，但需要对圆圈大小进行硬编码。我希望戒指与尺寸无关。如何使用 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

希望对您有所帮助。

Answer 2

我能够使用 CircularProgressIndicator 完成它

@Composable
fun ringView(){

var sz by remember { mutableStateOf(Size.Zero)}

    Box(
        Modifier
            .aspectRatio(1f)
            .fillMaxSize()
            .background(Color.Blue)
            .onGloballyPositioned { coordinates ->
                sz = coordinates.size.toSize()
            }
            , contentAlignment = Alignment.Center){

        Box(Modifier.aspectRatio(1f), contentAlignment = Alignment.Center){
            Text(text = pxToDp(sz.height.toInt()).toString())
            CircularProgressIndicator(progress = 0.9F, Modifier.size(pxToDp(sz.width.toInt()).dp), strokeWidth = (pxToDp(sz.width.toInt())/15).dp,color = Color.Green)
            CircularProgressIndicator(progress = 0.9F, Modifier.size((pxToDp(sz.width.toInt())-(2*(pxToDp(sz.width.toInt())/15))).dp), strokeWidth = (pxToDp(sz.width.toInt())/15).dp, color = Color.Black )
            CircularProgressIndicator(progress = 0.9F, Modifier.size((pxToDp(sz.width.toInt())-(4*(pxToDp(sz.width.toInt())/15))).dp), strokeWidth = (pxToDp(sz.width.toInt())/15).dp, color = Color.Gray )
            CircularProgressIndicator(progress = 0.9F, Modifier.size((pxToDp(sz.width.toInt())-(6*(pxToDp(sz.width.toInt())/15))).dp), strokeWidth = (pxToDp(sz.width.toInt())/15).dp, color = Color.Cyan )
            CircularProgressIndicator(progress = 0.9F, Modifier.size((pxToDp(sz.width.toInt())-(8*(pxToDp(sz.width.toInt())/15))).dp), strokeWidth = (pxToDp(sz.width.toInt())/15).dp, color = Color.Magenta )

        }

    }

}

fun pxToDp(px: Int): Int {
return (px / Resources.getSystem().displayMetrics.density).toInt()
}

使用 Jetpack Compose 构造环

Construct Rings using Jetpack Compose

android

kotlin

android-jetpack

android-jetpack-compose