進度指標會以視覺化的方式呈現作業狀態,他們使用動作技術 引起使用者的注意,瞭解整個程序的完成程度,例如 載入或處理資料模型也可以指出處理程序 而不會提及完成此程序可能的完成程度。
請考慮使用進度指標的三種用途:
- 載入內容:從網路擷取內容,例如載入 使用者個人資料的圖片或資料
- 檔案上傳:向使用者提供意見,說明上傳作業可能需要多久時間。
- 長時間處理:當應用程式處理大量資料時 讓使用者知道獎勵的總金額
Material Design 中有兩種進度指標:
- 「Determinate」:顯示已完成的進度。
- 未定:在不考慮進度的情況下繼續播放動畫。
同樣地,進度指標可採用以下兩種形式之一:
- 線性:從左到右填滿的水平列。
- 圓形:代表筆劃長長的圓形,直到其中適當圈出 圓週長。
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) } }
當載入完成時,位於上方的線性指標 範例如下所示:
圓形指標同樣會如下所示:
不確定的指標
未定指標無法反映完成作業的進度 不過,無論內部 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, ) }
以下是當指標運作時實作的範例:
以下範例為相同的實作範例,但加上
LinearProgressIndicator
取代 CircularProgressIndicator
。