Pasek powiadomień

Komponent paska powiadomień służy jako krótkie powiadomienie u dołu ekranu. Dostarcza informacji o operacji lub działaniu bez zakłócania wrażeń użytkownika. Paski powiadomień znikają po kilku sekundach. Użytkownik może też zamknąć go jednym działaniem, np. kliknięciem przycisku.

Rozważ te 3 przypadki użycia paska powiadomień:

• Potwierdzenie czynności:gdy użytkownik usunie e-maila lub wiadomość, pojawi się pasek powiadomień z prośbą o potwierdzenie czynności i opcją „Cofnij”.
• Stan sieci: gdy aplikacja utraci połączenie z internetem, pojawi się pasek powiadomień z informacją, że aplikacja jest offline.
• Przesyłanie danych: po przesłaniu formularza lub zaktualizowaniu ustawień pasek powiadomień informuje, że zmiana została zapisana.

Podstawowy przykład

Aby wdrożyć pasek powiadomień, najpierw utwórz element SnackbarHost zawierający właściwość SnackbarHostState. SnackbarHostState zapewnia dostęp do funkcji showSnackbar(), której możesz użyć do wyświetlenia paska powiadomień.

Ta funkcja zawieszania wymaga klasy CoroutineScope, np. rememberCoroutineScope. Można ją wywołać w odpowiedzi na zdarzenia interfejsu, aby wyświetlić Snackbar w ciągu Scaffold.

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

Pasek powiadomień z funkcją działania

Możesz podać działanie opcjonalne i dostosować czas trwania elementu Snackbar. Funkcja snackbarHostState.showSnackbar() akceptuje dodatkowe parametry actionLabel i duration oraz zwraca SnackbarResult.

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

Możesz podać niestandardową wartość Snackbar za pomocą parametru snackbarHost. Więcej informacji znajdziesz w dokumentacji interfejsu SnackbarHost API.