進度指標

進度指標可視覺化呈現作業狀態。他們使用動作技術 引起使用者的注意，瞭解整個程序的完成程度，例如 載入或處理資料模型也可以指出處理程序 而不會提及完成此程序可能的完成程度。

請考慮下列三種可能會使用進度指標的用途：

  • 載入內容：從網路擷取內容時，例如載入使用者個人資料的圖片或資料。
  • 檔案上傳：向使用者提供意見，說明上傳作業可能需要多久時間。
  • 處理時間過長：當應用程式處理大量資料時，請向使用者說明完成的進度。

在 Material Design 中，進度指標分為兩種類型：

  • Determinate：顯示進度。
  • 未定：在不考慮進度的情況下繼續播放動畫。

同樣地，進度指標可採用下列任一形式：

  • 線性：從左到右填滿的水平列。
  • 圓形：代表筆劃長長的圓形，直到其中適當圈出 圓週長。
直線進度指標和圓形進度指標。
圖 1. 進度指標有兩種類型。

API 介面

雖然您可以使用多個可組合項來建立與 Material Design 一致的進度指標，但這些可組合項的參數並沒有太大差異。9 月 您應注意的主要參數如下：

  • progress：指標顯示的目前進度。傳遞 Float 介於 0.0 至 1.0 之間。
  • color：實際指標的顏色。也就是 反映進度及完整包含元件的元件 。
  • trackColor：繪製指標的軌跡顏色。

確定指標

確定指標會準確反映動作的完成程度。請使用 LinearProgressIndicator 或 CircularProgressIndicator 可組合項，並傳遞 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

當載入完成時，位於上方的線性指標 範例如下所示：

同樣地，圓形指標會顯示如下：

不確定的指標

未定指標無法反映完成作業的進度 不過，無論內部 IP 位址為何 DNS 名稱始終會指向特定的執行個體而是利用動態效果指出使用者正在進行處理程序。 而且不需要指定任何完成度

如要建立不確定的進度指標，請使用 LinearProgressIndicator 或 CircularProgressIndicator 可組合元件，但不會傳入 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,
    )
}
ProgressIndicator.kt

以下是當指標運作時實作的範例：

以下是相同實作的範例，但使用 LinearProgressIndicator 而非 CircularProgressIndicator。

其他資源