Kurznachricht

Die Snackbar-Komponente dient als kurze Benachrichtigung, die unten auf dem Bildschirm angezeigt wird. Sie bietet Feedback zu einem Vorgang oder einer Aktion, ohne die Nutzererfahrung zu unterbrechen. Snackbars werden nach einigen Sekunden ausgeblendet. Der Nutzer kann sie auch mit einer Aktion schließen, z. B. durch Tippen auf eine Schaltfläche.

Sehen wir uns drei Anwendungsfälle an, in denen Sie eine Snackbar verwenden könnten:

  • Aktionsbestätigung:Nachdem ein Nutzer eine E-Mail oder Nachricht gelöscht hat, wird eine Snackbar angezeigt, um die Aktion zu bestätigen und die Option Rückgängig anzubieten.
  • Netzwerkstatus:Wenn die App die Internetverbindung verliert, wird eine Snackbar eingeblendet, die darauf hinweist, dass sie jetzt offline ist.
  • Datenübermittlung: Nach dem erfolgreichen Senden eines Formulars oder Aktualisieren von Einstellungen wird in einer Snackbar angezeigt, dass die Änderung erfolgreich gespeichert wurde.
Beispiele für Snackbar-UI-Komponenten
Abbildung 1. Beispiele für Snackbars.

Einfaches Beispiel

Wenn Sie eine Snackbar implementieren möchten, erstellen Sie zuerst einen SnackbarHost, der die Property SnackbarHostState enthält. SnackbarHostState bietet Zugriff auf die Funktion showSnackbar(), mit der Sie die Snackbar anzeigen können.

Diese Sperrfunktion erfordert ein CoroutineScope, wie es von rememberCoroutineScope zurückgegeben wird, und kann als Reaktion auf UI-Ereignisse aufgerufen werden, um ein Snackbar in Scaffold anzuzeigen.

val scope = rememberCoroutineScope()
val snackbarHostState = remember { SnackbarHostState() }
Scaffold(
    snackbarHost = {
        SnackbarHost(hostState = snackbarHostState)
    },
    floatingActionButton = {
        ExtendedFloatingActionButton(
            text = { Text("Show snackbar") },
            icon = { Icon(Icons.Filled.Image, contentDescription = "") },
            onClick = {
                scope.launch {
                    snackbarHostState.showSnackbar("Snackbar")
                }
            }
        )
    }
) { contentPadding ->
    // Screen content
}

Snackbar mit Aktion

Sie können eine optionale Aktion angeben und die Dauer des Snackbar anpassen. Die Funktion snackbarHostState.showSnackbar() akzeptiert zusätzliche actionLabel- und duration-Parameter und gibt ein SnackbarResult zurück.

val scope = rememberCoroutineScope()
val snackbarHostState = remember { SnackbarHostState() }
Scaffold(
    snackbarHost = {
        SnackbarHost(hostState = snackbarHostState)
    },
    floatingActionButton = {
        ExtendedFloatingActionButton(
            text = { Text("Show snackbar") },
            icon = { Icon(Icons.Filled.Image, contentDescription = "") },
            onClick = {
                scope.launch {
                    val result = snackbarHostState
                        .showSnackbar(
                            message = "Snackbar",
                            actionLabel = "Action",
                            // Defaults to SnackbarDuration.Short
                            duration = SnackbarDuration.Indefinite
                        )
                    when (result) {
                        SnackbarResult.ActionPerformed -> {
                            /* Handle snackbar action performed */
                        }
                        SnackbarResult.Dismissed -> {
                            /* Handle snackbar dismissed */
                        }
                    }
                }
            }
        )
    }
) { contentPadding ->
    // Screen content
}

Mit dem Parameter snackbarHost können Sie einen benutzerdefinierten Snackbar angeben. Weitere Informationen finden Sie in der SnackbarHost API-Referenzdokumentation.

Wichtige Fakten

  • actionLabel = "Action": Legt den Text des Aktionsbuttons fest.
  • duration = SnackbarDuration.Indefinite: Die Snackbar wird so lange angezeigt, bis sie vom Nutzer oder Programm geschlossen wird.
  • SnackbarResult.ActionPerformed: Gibt an, dass der Nutzer auf den Aktionsbutton der Snackbar geklickt hat.
  • SnackbarResult.Dismissed: Gibt an, dass der Nutzer die Snackbar geschlossen hat, ohne auf den Aktionsbutton zu klicken.