Die Snackbar-Komponente dient als kurze Benachrichtigung, die unten auf dem Bildschirm angezeigt wird. Sie gibt Feedback zu einem Vorgang oder einer Aktion, ohne die Nutzererfahrung zu unterbrechen. Snackbars verschwinden nach wenigen Sekunden. Der Nutzer kann sie auch mit einer Aktion schließen, z. B. durch Tippen auf eine Schaltfläche.
Betrachten Sie diese drei Anwendungsfälle, in denen Sie eine Snackbar verwenden können:
- Aktionsbestätigung:Nachdem ein Nutzer eine E-Mail oder Nachricht gelöscht hat, wird eine Snackbar angezeigt, über die die Aktion bestätigt und die Option zum Rückgängigmachen angeboten wird.
- Netzwerkstatus:Wenn die Internetverbindung der App unterbrochen wird, wird eine Snackbar eingeblendet, die angibt, dass die App jetzt offline ist.
- Datenübermittlung:Nachdem ein Formular gesendet oder Einstellungen aktualisiert wurde, wird in einer Snackbar angezeigt, dass die Änderung gespeichert wurde.
Einfaches Beispiel
Zum Implementieren einer Snackbar erstellen Sie zuerst SnackbarHost
mit einer SnackbarHostState
-Property. SnackbarHostState
bietet Zugriff auf die Funktion showSnackbar()
, mit der Sie die Snackbar anzeigen können.
Diese Unterbrechungsfunktion erfordert eine CoroutineScope
, z. B. bei Verwendung von rememberCoroutineScope
. Sie 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
Du kannst eine optionale Aktion angeben und die Dauer der Snackbar
anpassen.
Die Funktion snackbarHostState.showSnackbar()
akzeptiert die zusätzlichen Parameter actionLabel
und duration
und gibt ein SnackbarResult
-Objekt 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 ein benutzerdefiniertes Snackbar
-Objekt angeben. Weitere Informationen finden Sie in der SnackbarHost
API-Referenzdokumentation.