使用Jetpack Compose构造环

Question

我尝试过通过堆叠< code > circular progression indicator 来使用方框布局，但是需要硬编码圆的大小。我希望戒指是大小不可知的。我如何使用Compose实现这一点？

Answer 1

我能够使用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()
}

Answer 2

您可以尝试使用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

希望有帮助。