代码之家  ›  专栏  ›  技术社区  ›  Shady Abdulmunim

喷气背包组合中的扫掠渐变圆形进度条

  •  0
  • Shady Abdulmunim  · 技术社区  · 11 月前

    我想用jetpack compose创建一个带有渐变的圆形进度条

    sweepGradient circular progress bar

    我尝试使用Brush.sweepGradient进行此操作,但由于进度条的起始角度和扫掠渐变不同,而且扫掠渐变中没有控制角度的参数,因此无法正常工作 怎么做??

    1 回复  |  直到 11 月前
        1
  •  1
  •   Yamin    11 月前

    我认为不可能给 CircularProgressIndicator 因为到目前为止 color 参数只接受 Color 我没有看到任何超载 Brush 颜色的类型。

    实现你想要的一种方法是使用 Canvas 然而,一个简单的戒指是不够的。通过一些调整,您可以实现这一点:

    gradient progress bar

    @Composable
    fun GradientProgress(
        modifier: Modifier = Modifier,
        diameter: Dp = 100.dp,
        width: Float = 10f,
        colors: List<Color> = listOf(Color.Cyan, Color.Blue),
        progress: Float = .75f
    ) {
        Box(
            content = {
                Text(
                    text = "${(progress * 100).toInt()}",
                    modifier = Modifier.align(Alignment.Center)
                )
                Canvas(
                    modifier = modifier
                        .size(diameter)
                        .rotate(-90f)
                        .graphicsLayer {
                            rotationY = 360f
                        },
                    onDraw = {
                        drawArc(
                            color = Color.LightGray,
                            startAngle = 0f,
                            sweepAngle = 360f,
                            false,
                            style = Stroke(width = width)
                        )
                        drawArc(
                            brush = Brush.sweepGradient(colors = colors),
                            startAngle = 0f,
                            sweepAngle = progress * 360f,
                            false,
                            style = Stroke(width = width)
                        )
                    }
                )
            }
        )
    }