Die Snackbar-Komponente dient als kurze Benachrichtigung, die am unten auf dem Bildschirm. Sie liefert Feedback zu einem Vorgang oder einer Aktion, die User Experience stören. Snackbars verschwinden nach wenigen Sekunden. Die kann der Nutzer sie auch durch eine 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 Die Snackbar bestätigt die Aktion und bietet die Möglichkeit zum Rückgängigmachen an. Option.
- Netzwerkstatus:Wenn die Internetverbindung der App unterbrochen wird, wird eine Snackbar wird angezeigt, dass sie offline ist.
- Datenübermittlung: Nach erfolgreichem Senden eines Formulars oder Aktualisieren wird in einer Snackbar angezeigt, dass die Änderung gespeichert wurde.
Einfaches Beispiel
Zum Implementieren einer Snackbar erstellen Sie zuerst SnackbarHost
mit einem
SnackbarHostState
-Property. SnackbarHostState
bietet Zugriff auf
showSnackbar()
-Funktion, mit der Sie die Snackbar anzeigen können.
Diese aussetzende Funktion erfordert eine CoroutineScope
, wie z. B. bei Verwendung von
rememberCoroutineScope
– und kann als Reaktion auf UI-Ereignisse aufgerufen werden, um
Snackbar
in Scaffold
anzeigen.
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 zusätzliche actionLabel
und duration
und gibt 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 ein benutzerdefiniertes Snackbar
-Objekt angeben. Weitere Informationen finden Sie in der
Weitere Informationen finden Sie in der SnackbarHost
-API-Referenzdokumentation.