Kurznachricht

Die Snackbar-Komponente dient als kurze Benachrichtigung, die am unten auf dem Bildschirm. Sie geben Feedback zu einer Aktion, ohne die Nutzererfahrung zu unterbrechen. Infofelder verschwinden nach einigen Sekunden. Die kann der Nutzer sie auch durch eine Aktion schließen, z. B. durch Tippen auf eine Schaltfläche.

Hier sind drei Anwendungsfälle, in denen Sie eine Snackbar verwenden könnten:

• Aktion bestätigen: Nachdem ein Nutzer eine E-Mail oder Nachricht gelöscht hat, wird eine Snackbar angezeigt, in der die Aktion bestätigt und die Option „Rückgängig“ angeboten wird.
• Netzwerkstatus:Wenn die Internetverbindung der App unterbrochen wird, wird eine Snackbar wird angezeigt, dass sie offline ist.
• Datenübermittlung: Wenn ein Formular erfolgreich gesendet oder die Einstellungen aktualisiert wurden, wird in einer Snackbar angezeigt, dass die Änderung gespeichert wurde.

Einfaches Beispiel

Wenn Sie eine Snackbar implementieren möchten, erstellen Sie zuerst SnackbarHost mit der Property SnackbarHostState. SnackbarHostState bietet Zugriff auf die Funktion showSnackbar(), 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
}
MaterialLayoutSnippets.kt

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-Parameter und gibt eine 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
}
MaterialLayoutSnippets.kt

Mit dem Parameter snackbarHost können Sie ein benutzerdefiniertes Snackbar-Objekt angeben. Weitere Informationen finden Sie in den SnackbarHost API-Referenzdokumenten.