Kurznachricht

Die Snackbar-Komponente dient als kurze Benachrichtigung, die unten auf dem Bildschirm angezeigt wird. Sie geben Feedback zu einem Vorgang oder einer Aktion, ohne die User Experience zu unterbrechen. Snackbars verschwinden nach einigen 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, mit der die Aktion bestätigt und die Option zum Rückgängigmachen angeboten wird.
• Netzwerkstatus:Wenn die Internetverbindung der App unterbrochen wird, wird eine Snackbar angezeigt, die angibt, dass die App jetzt offline ist.
• Datenübermittlung: Nach dem erfolgreichen Senden eines Formulars oder dem Aktualisieren von Einstellungen zeigt eine Snackbar an, dass die Änderung gespeichert wurde.

Einfaches Beispiel

Um eine Snackbar zu implementieren, müssen Sie zuerst SnackbarHost erstellen, das ein SnackbarHostState-Attribut enthält. SnackbarHostState bietet Zugriff auf die Funktion showSnackbar(), mit der Sie Ihre Snackbar anzeigen lassen können.

Diese Funktion zum Anhalten benötigt eine CoroutineScope, z. B. bei der 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
}
MaterialLayoutSnippets.kt

Snackbar mit Aktion

Du kannst eine optionale Aktion angeben und die Dauer von Snackbar anpassen. Die snackbarHostState.showSnackbar()-Funktion akzeptiert zusätzliche actionLabel- und duration-Parameter und gibt einen SnackbarResult-Wert 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
}
MaterialLayoutSnippets.kt

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