Compose彩色环形进度条实现（Kotlin）

代码

刚刚接触Compose，想把项目迁移一下，这个环形进度条查了好多地方都没找到合适的，自己研究了半天搞了一个，上代码：

/**
 * 环形进度条描绘
 * @param boxWithDp 控件大小
 * @param process 进度所占角度大小
 */
@Composable
fun DrawColorRing(boxWithDp:Dp,process: Float) {
    Box(
        modifier = Modifier.size(boxWithDp+30.dp),
        contentAlignment = Alignment.Center
    ) {
        Canvas(modifier = Modifier.size(boxWithDp)) {
            //背景
            drawArc(
                Color.White,
                startAngle = 270f,
                sweepAngle = 360f,
                useCenter = false,
                style = Stroke(80f, cap = StrokeCap.Round),
            )
            drawArc(
                brush = Brush.sweepGradient(listOf(Color.Blue, Color.Green, Color.Blue), Offset(300.dp.toPx() / 2f, 300.dp.toPx() / 2f)),
                startAngle = 270f,
                sweepAngle = process,
                useCenter = false,
                style = Stroke(
                    width = 81f,
                    cap = StrokeCap.Round
                )
            )
        }
    }
}

预览及预览效果：

@Preview
@Composable
fun DrawColorRingView()
{
    DrawColorRing(300.dp,240f)
}

可调整属性：

• 可以自定义是否有背景，不需要背景可以删除第一个drawArc
• 可以调整背景颜色，我用的是 Color.White，可以换成别的颜色，也可以换成brush进行自定义
• 可以调整环形进度条的颜色，调整第二个drawArc的brush中的list的颜色进行颜色变换，通过offset来调整各种颜色的占比
• 可以调整圆环整体大小，通过调整传入的boxWithDp这个参数就可以调整控件的宽度，这里可以进一步封装，只传入progress参数
• 可以调整环的宽度，通过调整drawArc中的style中的width可以调整环的宽度，有背景的话两个都需要调
• 可以调整进度的前进方向，如果顺时针则progress传入正数，逆时针则是传入负数，同样可以进一步封装
• 可以调整进度的起始位置，可以看到270度时进度条从最上面开始，可以根据需求自行调整角度
• 可以调整环的末端是否为圆角，调整drawArc中的style中的cap参数即可

补充：

写的匆忙，有很多细节没有注意到， 欢迎大家提出更好的想法！