Compose Canvas 自定义圆形进度条

最新推荐文章于 2024-02-08 10:10:18 发布

安果移不动

最新推荐文章于 2024-02-08 10:10:18 发布

阅读量559

点赞数

分类专栏： # 038Compose 文章标签：大数据

独学而无友，则孤陋寡闻。q群582951247

本文链接：https://blog.csdn.net/mp624183768/article/details/125827724

版权

038Compose 专栏收录该内容

63 篇文章 2 订阅

订阅专栏

@Composable
fun CircleRing(boxWidthDp: Int, viewModel: TaskViewModel) {
    Canvas(modifier = Modifier.size(boxWidthDp.dp), onDraw = {
        val strokWidth = 30F
        //灰色背景
        drawArc(
            Color(0, 0, 0, 15),
            startAngle = 160f,
            sweepAngle = 220f,
            useCenter = false,
            style = Stroke(strokWidth, cap = StrokeCap.Round),
        )

        drawArc(
            Color.White,
            startAngle = 160f,
            sweepAngle = viewModel.pointOfYearPercent,
            useCenter = false,
            style = Stroke(strokWidth, cap = StrokeCap.Round),
        )

    })
}

进度是自己穿进去的

    //学年积分
    var pointOfYear by mutableStateOf(10000)
        private set

    //学年积分进度 220f *  pointOfYear / 学年总积分
    var pointOfYearPercent by mutableStateOf(0f)
        private set

    /**
     * 更新学习进度
     */
    fun updatePointPercent() {
        pointOfYearPercent = 220f * pointOfYear / totalPointOfYear
    }

效果

整个内容数据如下

       Box(contentAlignment = Alignment.Center,
                    modifier = Modifier
                        .height(boxWidthDp.dp)
                        .padding(top = 16.dp)
                ) {
                    //圆环
                    CircleRing(boxWidthDp = boxWidthDp, taskViewModel)
                    //进度数据
                    Column(modifier = Modifier
                        .align(Alignment.Center)
                        .fillMaxWidth(),
                        horizontalAlignment = Alignment.CenterHorizontally) {
                        Text(buildAnnotatedString {
                            append(taskViewModel.pointOfYear.toString())
                            withStyle(SpanStyle(fontSize = 10.sp)) {
                                append("分")

                            }
                        },
                            fontSize = 36.sp,
                            color = Color.White)

                        Text(text = "学年积分", fontSize = 12.sp,
                            color = Color.White)

                    }

                }

记得在下一个组件让他往上面偏移40dp不然空隙太多咯