进度指示器

进度指示器可直观显示操作的状态。它们使用动画来提醒用户某个进程（例如加载或处理数据）距离完成还有多远。它们还可以表示正在处理，但不提及处理进度。

请考虑以下三个可能需要使用进度指示器的用例：

• 加载内容：从网络提取内容时，例如加载用户个人资料的图片或数据。
• 文件上传：向用户反馈上传可能需要多长时间。
• 处理时间较长：在应用处理大量数据时，向用户传达已完成的总数据量。

在 Material Design 中，有两种类型的进度指示器：

• 确定：显示已完成的确切进度。
• 不确定：不考虑进度，持续进行动画。

同样，进度指示器可以采用以下两种形式之一：

• 线性：横向条，从左向右填充。
• 圆形：笔触会不断延长，直到覆盖整个圆形的周长。

图 1. 两种进度指示器。

API Surface

虽然您可以使用多个可组合项来创建与 Material Design 一致的进度指示器，但它们的参数没有太大差异。您应注意以下关键参数：

• progress：指示器显示的当前进度。传递一个介于 0.0 和 1.0 之间的 Float。
• color：实际指示器的颜色。即组件的反映进度且在进度完成时完全包含该组件的部分。
• trackColor：用于绘制指示器的轨道的颜色。

注意： LinearProgressIndicator 和 CircularProgressIndicator 的 API 本质上是相同的，您使用这两种 API 的方式也完全相同。您可以针对这两种情况使用以下代码段。

确定性指标

确定性指示器会准确反映操作的完成程度。请使用 LinearProgressIndicator 或 CircularProgressIndicator 可组合项，并为 progress 参数传递值。

以下代码段提供了一个相对详细的示例。当用户按下该按钮时，应用会同时显示进度指示器并启动一个协程，以逐步增加 progress 的值。这会导致进度指示器依次向上迭代。

注意 ：以下示例使用协程来迭代 progress 值，因为否则会阻塞界面线程。

@Composable
fun LinearDeterminateIndicator() {
    var currentProgress by remember { mutableStateOf(0f) }
    var loading by remember { mutableStateOf(false) }
    val scope = rememberCoroutineScope() // Create a coroutine scope

    Column(
        verticalArrangement = Arrangement.spacedBy(12.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxWidth()
    ) {
        Button(onClick = {
            loading = true
            scope.launch {
                loadProgress { progress ->
                    currentProgress = progress
                }
                loading = false // Reset loading when the coroutine finishes
            }
        }, enabled = !loading) {
            Text("Start loading")
        }

        if (loading) {
            LinearProgressIndicator(
                progress = { currentProgress },
                modifier = Modifier.fillMaxWidth(),
            )
        }
    }
}

/** Iterate the progress value */
suspend fun loadProgress(updateProgress: (Float) -> Unit) {
    for (i in 1..100) {
        updateProgress(i.toFloat() / 100)
        delay(100)
    }
}
ProgressIndicator.kt

加载部分完成后，上例中的线性指示器会显示如下所示：

同样，圆形指示器会显示如下所示：

不确定指示器

不确定性指示器不会反映操作距离完成的程度。而是使用动画向用户表明正在处理，但不会指定任何完成程度。

如需创建不确定进度指示器，请使用 LinearProgressIndicator 或 CircularProgressIndicator 可组合项，但不要为 progress 传入值。以下示例演示了如何通过按下按钮来切换不确定性指示器。

注意 ：此示例还演示了如何传递 color 和 trackColor 参数的值以自定义指示器的外观。

@Composable
fun IndeterminateCircularIndicator() {
    var loading by remember { mutableStateOf(false) }

    Button(onClick = { loading = true }, enabled = !loading) {
        Text("Start loading")
    }

    if (!loading) return

    CircularProgressIndicator(
        modifier = Modifier.width(64.dp),
        color = MaterialTheme.colorScheme.secondary,
        trackColor = MaterialTheme.colorScheme.surfaceVariant,
    )
}
ProgressIndicator.kt

以下是指示器处于活动状态时的此实现示例：

以下是相同实现的示例，但使用 LinearProgressIndicator 而非 CircularProgressIndicator。

其他资源

• Material UI 文档