Fortschrittsanzeigen

Fortschrittsindikatoren zeigen den Status eines Vorgangs visuell an. Sie verwenden Bewegung, um den Nutzer darauf aufmerksam zu machen, wie weit der Vorgang abgeschlossen ist, z. B. beim Laden oder Verarbeiten von Daten. Sie können auch anzeigen, dass eine Verarbeitung stattfindet, ohne anzugeben, wie weit sie abgeschlossen ist.

Hier sind drei Anwendungsfälle, in denen Sie einen Fortschrittsindikator verwenden können:

• Inhalte laden: Beim Abrufen von Inhalten aus einem Netzwerk, z. B. beim Laden eines Bildes oder von Daten für ein Nutzerprofil.
• Datei-Upload: Geben Sie dem Nutzer Feedback dazu, wie lange der Upload dauern kann.
• Lange Verarbeitung: Wenn eine App eine große Datenmenge verarbeitet, informieren Sie den Nutzer darüber, wie viel des Vorgangs abgeschlossen ist.

In Material Design gibt es zwei Arten von Fortschrittsindikatoren:

• Bestimmt: Zeigt genau an, wie viel Fortschritt erzielt wurde.
• Unbestimmt: Wird kontinuierlich animiert, unabhängig vom Fortschritt.

Ebenso kann ein Fortschrittsindikator eine der beiden folgenden Formen annehmen:

• Linear: Ein horizontaler Balken, der sich von links nach rechts füllt.
• Kreisförmig: Ein Kreis, dessen Strichlänge zunimmt, bis sie den gesamten Umfang des Kreises umfasst.

API-Oberfläche

Es gibt zwar mehrere zusammensetzbare Elemente, mit denen Sie Fortschrittsindikatoren erstellen können, die mit Material Design übereinstimmen, aber ihre Parameter unterscheiden sich nicht wesentlich. Zu den wichtigsten Parametern, die Sie beachten sollten, gehören die folgenden:

• progress: Der aktuelle Fortschritt, der vom Indikator angezeigt wird. Übergeben Sie einen Float-Wert zwischen 0.0 und 1.0.
• color: Die Farbe des eigentlichen Indikators. Das ist der Teil der Komponente, der den Fortschritt widerspiegelt und die Komponente vollständig umfasst, wenn der Fortschritt abgeschlossen ist.
• trackColor: Die Farbe der Spur, über die der Indikator gezeichnet wird.

Bestimmte Indikatoren

Ein bestimmter Indikator gibt genau an, wie weit eine Aktion abgeschlossen ist. Verwenden Sie entweder die LinearProgressIndicator oder CircularProgressIndicator zusammensetzbaren Elemente und übergeben Sie einen Wert für den progress Parameter.

Das folgende Snippet enthält ein relativ detailliertes Beispiel. Wenn der Nutzer auf die Schaltfläche klickt, zeigt die App den Fortschrittsindikator an und startet eine Coroutine, die den Wert von progress schrittweise erhöht. Dadurch wird der Fortschrittsindikator schrittweise erhöht.

@Composable
fun LinearDeterminateIndicator() {
    var currentProgress by remember { mutableFloatStateOf(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

Wenn das Laden teilweise abgeschlossen ist, sieht der lineare Indikator im vorherigen Beispiel so aus:

Ebenso sieht der kreisförmige Indikator so aus:

Unbestimmte Indikatoren

Ein unbestimmter Indikator gibt nicht an, wie weit ein Vorgang abgeschlossen ist. Stattdessen wird durch Bewegung angezeigt, dass die Verarbeitung läuft, ohne jedoch einen Abschlussgrad anzugeben.

Verwenden Sie zum Erstellen eines unbestimmten Fortschrittsindikators das zusammensetzbare Element LinearProgressIndicator oder CircularProgressIndicator, übergeben Sie aber keinen Wert für progress. Das folgende Beispiel zeigt, wie Sie einen unbestimmten Indikator mit einem Klick auf eine Schaltfläche ein- und ausschalten können.

@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

Hier sehen Sie ein Beispiel für diese Implementierung, wenn der Indikator aktiv ist:

Hier sehen Sie ein Beispiel für dieselbe Implementierung, aber mit LinearProgressIndicator anstelle von CircularProgressIndicator.

Zusätzliche Ressourcen

• Material UI-Dokumentation