Fortschrittsanzeigen

Fortschrittsanzeigen geben den Status eines Vorgangs visuell wieder. Mithilfe von Bewegungen wird der Nutzer darauf aufmerksam gemacht, wie weit der Vorgang fortgeschritten ist, z. B. beim Laden oder Verarbeiten von Daten. Sie können auch angeben, dass die Verarbeitung stattfindet, ohne zu berücksichtigen, wie kurz sie bis zum Abschluss ist.

Betrachten Sie diese drei Anwendungsfälle, in denen Sie eine Fortschrittsanzeige verwenden können:

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

In Material Design gibt es zwei Arten von Fortschrittsanzeigen:

• Bestimmt: Hier sehen Sie genau, wie weit Sie mit der Aufgabe gekommen sind.
• Unbestimmt: Die Animation wird kontinuierlich abgespielt, ohne Rücksicht auf den Fortschritt.

Eine Fortschrittsanzeige kann ebenfalls eine der folgenden beiden Formen haben:

• Linear: Ein horizontaler Balken, der sich von links nach rechts füllt.
• Kreisförmig: Ein Kreis, dessen Strich sich so lange verlängert, bis er den gesamten Umfang des Kreises umschließt.

API-Oberfläche

Es gibt zwar mehrere Composeables, mit denen Sie Fortschrittsanzeigen im Material Design-Stil erstellen können, ihre Parameter unterscheiden sich jedoch nicht wesentlich. Zu den wichtigsten Parametern gehören:

• progress: Der aktuelle Fortschritt, der im Indikator angezeigt wird. Übergeben Sie Float zwischen 0.0 und 1.0.
• color: Die Farbe des tatsächlichen 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 des Tracks, über den der Indikator gezeichnet wird.

Indikatoren bestimmen

Ein Determinate-Indikator gibt genau an, wie vollständig eine Aktion ist. Verwenden Sie entweder die zusammensetzbare Funktion LinearProgressIndicator oder CircularProgressIndicator und übergeben Sie einen Wert für den Parameter progress.

Das folgende Snippet ist ein relativ detailliertes Beispiel. Wenn der Nutzer auf die Schaltfläche drückt, zeigt die App sowohl die Fortschrittsanzeige als auch eine Coroutine an, die den Wert von progress allmählich erhöht. Dadurch wird der Fortschrittsanzeige nacheinander ein höherer Wert zugewiesen.

@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

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

Der kreisförmige Indikator sieht so aus:

Unbestimmte Indikatoren

Ein unbestimmter Indikator gibt nicht an, wie weit ein Vorgang fortgeschritten ist. Stattdessen wird dem Nutzer durch Bewegung angezeigt, dass die Verarbeitung läuft, ohne dass der Fortschritt angegeben wird.

Wenn Sie einen unbestimmten Fortschrittsindikator erstellen möchten, verwenden Sie das LinearProgressIndicator- oder CircularProgressIndicator-Kompositelement, geben Sie aber keinen Wert für progress ein. Das folgende Beispiel zeigt, wie Sie einen unbestimmten Indikator durch Drücken einer Schaltfläche umschalten 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

Im folgenden Beispiel ist die Anzeige aktiv:

Im Folgenden finden Sie ein Beispiel für dieselbe Implementierung, jedoch mit LinearProgressIndicator anstelle von CircularProgressIndicator.

Weitere Informationen

• Material UI-Dokumente