如何使用 Compose 渲染普通的 android ProgressBar？

Question

我的应用程序需要一个 ProgressBar，我正在尝试使用 Jetpack Compose 来实现它，所以要么我需要一个内置的 ProgressBar 支持（我没有找到它），要么应该有一种机制来使用 Compose 显示普通的 Android 小部件。这有可能吗？

Answer 1

当然，我们在 Jetpack Compose 中有进度条：

CircularProgressIndicator：将进度条显示为圆形。它是不确定的。以样式中设置的原色为主题。另一个变体是确定的，它将参数的进度作为 Float (0.0f - 1.0f)

例子：

// Indeterminate
CircularProgressIndicator()

// Determinate
CircularProgressIndicator(progress = 0.5f)

LinearProgressIndicator：将进度条显示为线。它是不确定的。以样式中设置的原色为主题。另一个变体是确定的，它将参数的进度作为 Float (0.0f - 1.0f)

例子：

// Indeterminate
LinearProgressIndicator()

// Determinate
LinearProgressIndicator(progress = 0.5f)

Answer 2

有了1.0.x你可以使用LinearProgressIndicator或CircularProgressIndicator

// Indeterminate
CircularProgressIndicator()
LinearProgressIndicator()
// Determinate
CircularProgressIndicator(progress = ..)
LinearProgressIndicator(progress = ..)

例子：

var progress by remember {  mutableStateOf(0.1f) }

LinearProgressIndicator(
    backgroundColor = Color.White,
    progress = progress,
    color = blue700
)

要更新值，您可以使用以下内容：

// { if (progress < 1f) progress += 0.1f }

Answer 3

对于圆角，我们可以使用此代码（它与 LinearProgress 相同，但有一个小修正 - 在 drawLine 中，我们使用参数 StrokeCap.Round 进行舍入）

@Composable
fun LinearRoundedProgressIndicator(
    /*@FloatRange(from = 0.0, to = 1.0)*/
    progress: Float,
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colors.primary,
    backgroundColor: Color = color.copy(alpha = ProgressIndicatorDefaults.IndicatorBackgroundOpacity)
) {
    val linearIndicatorHeight = ProgressIndicatorDefaults.StrokeWidth
    val linearIndicatorWidth = 240.dp
    Canvas(
        modifier
            .progressSemantics(progress)
            .size(linearIndicatorWidth, linearIndicatorHeight)
            .focusable()
    ) {
        val strokeWidth = size.height
        drawRoundedLinearIndicatorBackground(backgroundColor, strokeWidth)
        drawRoundedLinearIndicator(0f, progress, color, strokeWidth)
    }
}

private fun DrawScope.drawRoundedLinearIndicatorBackground(
    color: Color,
    strokeWidth: Float
) = drawRoundedLinearIndicator(0f, 1f, color, strokeWidth)

private fun DrawScope.drawRoundedLinearIndicator(
    startFraction: Float,
    endFraction: Float,
    color: Color,
    strokeWidth: Float
) {
    val width = size.width
    val height = size.height
    // Start drawing from the vertical center of the stroke
    val yOffset = height / 2

    val isLtr = layoutDirection == LayoutDirection.Ltr
    val barStart = (if (isLtr) startFraction else 1f - endFraction) * width
    val barEnd = (if (isLtr) endFraction else 1f - startFraction) * width

    // Progress line
    drawLine(color, Offset(barStart, yOffset), Offset(barEnd, yOffset), strokeWidth, StrokeCap.Round)
}