Kurznachricht

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 Nutzerfreundlichkeit zu beeinträchtigen. Snackbars werden nach einigen Sekunden ausgeblendet. Nutzer können 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önnen:

• 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 angezeigt, die darauf hinweist, dass sie jetzt offline ist.
• Datenübermittlung:Wenn ein Formular erfolgreich gesendet oder Einstellungen aktualisiert wurden, wird in einer Snackbar angezeigt, dass die Änderung erfolgreich gespeichert wurde.

Einfaches Beispiel

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

Diese aussetzende Funktion erfordert einen CoroutineScope wie den von rememberCoroutineScope zurückgegebenen und kann als Reaktion auf UI-Ereignisse aufgerufen werden, um eine 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

Sie können eine optionale Aktion angeben und die Dauer der Snackbar anpassen. Die snackbarHostState.showSnackbar() Funktion 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
}
MaterialLayoutSnippets.kt

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

Wichtige Fakten

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