Question

我正在尝试使用 jetpack compose 对 CircularProgressIndicator 的角进行圆角处理。但我没有看到任何成员变量这样做。以下是源代码，但它不以 Stroke 作为参数。如果可以，那么我们将能够创建带有圆帽的自定义 Stroke。

@Composable
fun CircularProgressIndicator(
    /*@FloatRange(from = 0.0, to = 1.0)*/
    progress: Float,
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colors.primary,
    strokeWidth: Dp = ProgressIndicatorDefaults.StrokeWidth
) {
    val stroke = with(LocalDensity.current) {
        Stroke(width = strokeWidth.toPx(), cap = StrokeCap.Butt)
    }
    Canvas(
        modifier
            .progressSemantics(progress)
            .size(CircularIndicatorDiameter)
            .focusable()
    ) {
        // Start at 12 O'clock
        val startAngle = 270f
        val sweep = progress * 360f
        drawDeterminateCircularIndicator(startAngle, sweep, color, stroke)
    }
}

Answer 1

如果您想获得包含进度的框的圆边，只需在修改器中为背景设置一个形状（您还需要设置颜色）。

CircularProgressIndicator(modifier = Modifier.background(Color.Black, shape = RoundedCornerShape(15.dp)))

Compose 中带有圆角的 CircularProgressIndicator

1 个答案: