Pasek powiadomień

Komponent paska powiadomień to krótkie powiadomienie, które pojawia się u dołu ekranu. Informuje o operacji lub działaniu bez przerywania pracy użytkownika. Paski powiadomień znikają po kilku sekundach. Użytkownik może je też zamknąć, wykonując działanie, np. dotykając przycisku.

Oto 3 przypadki użycia, w których możesz użyć paska powiadomień:

• Potwierdzenie działania: gdy użytkownik usunie e-maila lub wiadomość, pojawi się pasek powiadomień z potwierdzeniem działania i opcją Cofnij.
• Stan sieci: gdy aplikacja utraci połączenie z internetem, pojawi się pasek powiadomień z informacją, że jest teraz offline.
• Przesyłanie danych: po przesłaniu formularza lub zaktualizowaniu ustawień pojawi się pasek powiadomień z informacją, że zmiany zostały zapisane.

Podstawowy przykład

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

Ta funkcja zawieszająca wymaga CoroutineScope – np. tego, który jest zwracany przez rememberCoroutineScope – i może być wywoływana w odpowiedzi na zdarzenia interfejsu użytkownika, aby wyświetlić Snackbar w 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 działaniem

Możesz podać opcjonalne działanie i dostosować czas trwania 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

Za pomocą parametru snackbarHost możesz podać niestandardowy Snackbar. Więcej informacji znajdziesz w dokumentacji API SnackbarHost.

Najważniejsze punkty

• actionLabel = "Action": ustawia tekst przycisku polecenia.
• duration = SnackbarDuration.Indefinite: pasek powiadomień pozostaje wyświetlony, dopóki użytkownik lub program go nie zamknie.
• SnackbarResult.ActionPerformed: oznacza, że użytkownik kliknął przycisk polecenia na pasku powiadomień.
• SnackbarResult.Dismissed: oznacza, że użytkownik zamknął pasek powiadomień bez klikania przycisku polecenia.