Pasek powiadomień

Komponent paska powiadomień to krótkie powiadomienie, które pojawia się u dołu ekranu. Dostarcza informacji o operacji lub działaniu bez zakłócania wygody użytkownika. Paski powiadomień znikają po kilku sekundach. Użytkownik może też zamknąć je, wykonując działanie, np. klikając przycisk.

Oto 3 przykłady zastosowania paska powiadomień:

  • Potwierdzenie działania: gdy użytkownik usunie e-maila lub wiadomość, pojawi się komunikat potwierdzający działanie i oferujący opcję Cofnij.
  • Stan sieci: gdy aplikacja utraci połączenie z internetem, pojawi się wyskakujący pasek z informacją, że jest teraz offline.
  • Przesyłanie danych: po przesłaniu formularza lub zaktualizowaniu ustawień pojawia się komunikat z informacją, że zmiana została zapisana.
Przykłady komponentów interfejsu paska powiadomień.
Rysunek 1. Przykłady snackbarów.

Podstawowy przykład

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

Ta funkcja zawieszająca wymaga CoroutineScope – takiego jak zwracany przez rememberCoroutineScope – i może być wywoływana w odpowiedzi na zdarzenia interfejsu, 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
}

Pasek z działaniem

Możesz podać opcjonalne działanie i dostosować czas trwania Snackbar. Funkcja snackbarHostState.showSnackbar() przyjmuje 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
}

Możesz podać niestandardowy parametr Snackbar z parametrem snackbarHost. Więcej informacji znajdziesz w dokumentacji interfejsu API SnackbarHost.

Najważniejsze punkty

  • actionLabel = "Action": ustawia tekst przycisku polecenia.
  • duration = SnackbarDuration.Indefinite: wyświetla snackbar, 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.