进度指示器

进度指示器直观地显示了操作的状态。它们利用动画效果 吸引用户注意整个过程的完成进度,例如 加载或处理数据。它们也表示处理过程 而不考虑任务的完成进度。

请考虑以下三个可能会用到进度指示器的用例:

  • 加载内容:从网络中提取内容时,例如加载时 用户个人资料的图片或数据
  • 文件上传:向用户提供关于上传所需时间的反馈。
  • 处理时间较长:当应用处理大量数据时, 向用户传达总数中有多少内容已完成。

在 Material Design 中,有两种类型的进度指示器:

  • 确定:显示具体进度。
  • 不确定:动画持续播放,而不考虑进度。

同理,进度指示器可以采用以下两种形式之一:

  • 线性:从左到右填充的水平条。
  • 圆形:描边长度延长至包含 圆周长。
一个线性进度指示器和一个圆形进度指示器。
图 1. 两种进度指示器。

API Surface

尽管您可以使用多个可组合项来创建进度指示器 与 Material Design 保持一致,它们的参数没有很大差异。在以下地点之间: 您应记住的关键参数如下:

  • progress:指示器显示的当前进度。传递 Float 介于 0.01.0 之间。
  • color:实际指示器的颜色。也就是说, 能够反映进度且完全包含该组件的组件 当进度完成时。
  • trackColor:绘制指示器的轨道的颜色。

确定性指标

确定性指标可准确反映操作的完成程度。使用 LinearProgressIndicatorCircularProgressIndicator 可组合项,并为 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)
    }
}

当加载部分完成时,上述线性指示器 如下所示:

同样,圆形指示器如下所示:

不确定性指示符

不确定性指示器不会反映操作的完成程度 。相反,它使用动作来向用户表明处理正在进行, 但不指定任何完成程度。

如需创建不确定的进度指示器,请使用 LinearProgressIndicatorCircularProgressIndicator 可组合项,但不要传入 progress。以下示例演示了如何将 不确定性指示器。

@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,
    )
}

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

下面是一个相同实施示例, LinearProgressIndicator,而非 CircularProgressIndicator

其他资源