進度指標

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

請考慮使用進度指標的三種用途：

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

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。

其他資源