我如何在Jetpack组成的构图中设计一个多圆形进度栏？

发布于 2025-01-26 18:10:24 字数 147 浏览 2 评论 0 原文

我正在尝试设计一个进度栏，展示了使用JetPack组成的多个过程，但我找不到任何库或帮助材料。我只能设计一个进度栏，但是我需要设计

“此图像” 。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

野稚 2025-02-02 18:10:24

只需在 box 中使用多个 cignularprogressIndicator ：

Box(contentAlignment = Alignment.Center) {
    CircularProgressIndicator(
        progress = 0.45f,
        color = Red,
        modifier = Modifier.then(Modifier.size(60.dp)))
    CircularProgressIndicator(
        progress = 0.55f,
        color = Green,
        modifier = Modifier.then(Modifier.size(80.dp)))
    CircularProgressIndicator(
        progress = 0.75f,
        color = Blue,
        modifier = Modifier.then(Modifier.size(100.dp)))
}

如果您想绘制从M2 1.4.0-Alpha04开始的圆形曲目和M3 1.1.0-Alpha04 您可以使用 trackColor 参数：

CircularProgressIndicator(
    //...
    trackColor = LightGray
)

如果您要绘制圆形，则在此之前发布之前跟踪您可以使用 Canvas + CightularProgressIndicator 。
构建自定义组合
类似：

   val stroke = with(LocalDensity.current) {
    Stroke(width = ProgressIndicatorDefaults.StrokeWidth.toPx(), cap = StrokeCap.Butt)
   }

    Canvas(modifier = Modifier.size(60.dp)){
        val diameterOffset = stroke.width / 2
        drawCircle(
            radius = size.minDimension / 2.0f-diameterOffset,
            color= LightGray,style = stroke)
    }
    CircularProgressIndicator(
        progress = 0.45f,
        color = Red,
        modifier = Modifier.then(Modifier.size(60.dp)))

Just use multiple CircularProgressIndicator inside a Box:

Box(contentAlignment = Alignment.Center) {
    CircularProgressIndicator(
        progress = 0.45f,
        color = Red,
        modifier = Modifier.then(Modifier.size(60.dp)))
    CircularProgressIndicator(
        progress = 0.55f,
        color = Green,
        modifier = Modifier.then(Modifier.size(80.dp)))
    CircularProgressIndicator(
        progress = 0.75f,
        color = Blue,
        modifier = Modifier.then(Modifier.size(100.dp)))
}

If you want to draw also the circular track starting from M2 1.4.0-alpha04 and M3 1.1.0-alpha04 you can use the trackColor parameter:

CircularProgressIndicator(
    //...
    trackColor = LightGray
)

Before that releases if you want to draw also the circular track you can build a custom Composable with a Canvas + CircularProgressIndicator.
Something like:

   val stroke = with(LocalDensity.current) {
    Stroke(width = ProgressIndicatorDefaults.StrokeWidth.toPx(), cap = StrokeCap.Butt)
   }

    Canvas(modifier = Modifier.size(60.dp)){
        val diameterOffset = stroke.width / 2
        drawCircle(
            radius = size.minDimension / 2.0f-diameterOffset,
            color= LightGray,style = stroke)
    }
    CircularProgressIndicator(
        progress = 0.45f,
        color = Red,
        modifier = Modifier.then(Modifier.size(60.dp)))