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

【问题标题】：How can I render plain android ProgressBar with Compose?如何使用 Compose 渲染普通的 android ProgressBar？
【发布时间】：2020-05-06 13:50:15
【问题描述】：

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

【问题讨论】：

标签： android kotlin androidx android-progressbar android-jetpack-compose

【解决方案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)

【讨论】：

修改指标进度的有效方法是什么？效果>?
如何使角变圆？
调整圆角半径应该容易得多
@MirzaAhmedBaig 看起来不太可能，除非你想用 Shape 做很多事情
小注释 - 第一个示例有错字：缺少 s :D 感谢您的回答。

【解决方案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 }

【讨论】：

如何使角变圆？
@Mirza Ahmed Baig 使用 app:trackCornerRadius 进行圆角
进度指示器如何消失？
@Tanjimahmed 只需使用布尔值：if (isVisible) { LinearProgressIndicator()}

【解决方案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)
}

【讨论】：

如果遇到问题，请确保使用 import androidx.compose.foundation.Canvas 导入。