Pasek powiadomień

Komunikat to krótkie powiadomienie, które pojawia się u dołu ekranu. Informuje o operacji lub działaniu bez przerywania pracy użytkownika. Wiadomości znikają po kilku sekundach. Użytkownik może też zamknąć powiadomienia, wykonując działanie, np. klikając przycisk.

Oto 3 przykłady użycia paska z informacją:

  • Potwierdzenie działania: gdy użytkownik usunie e-maila lub wiadomość, pojawi się pasek informacyjny z potwierdzeniem działania i opcją „Cofnij”.
  • Stan sieci: gdy aplikacja utraci połączenie z internetem, pojawi się pasek informacyjny z powiadomieniem o przejściu w tryb offline.
  • Przesyłanie danych: po przesłaniu formularza lub zaktualizowaniu ustawień wyświetla się pasek z informacją o zapisaniu zmian.
Przykłady komponentów interfejsu użytkownika typu snackbar.
Rysunek 1. Przykłady pasków powiadomień.

Podstawowy przykład

Aby zaimplementować pasek powiadomień, 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świetlania paska z informacją.

Ta funkcja zawieszania wymaga CoroutineScope, np. w przypadku używania rememberCoroutineScope. Można ją wywoływać w odpowiedzi na zdarzenia interfejsu, aby wyświetlić SnackbarScaffold.

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 powiadomień 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 wartość 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 Snackbar za pomocą parametru snackbarHost. Więcej informacji znajdziesz w SnackbarHostdokumentacji interfejsu API.

Najważniejsze punkty

  • actionLabel = "Action": ustawia tekst przycisku działania.
  • withDismissAction = true: wyświetla w wyskakującym okienku znak „X”. Kliknij go, aby zamknąć pasek powiadomień.
  • duration = SnackbarDuration.Indefinite: wyświetla pasek powiadomień do momentu, aż użytkownik lub program go zamknie.
  • SnackbarResult.ActionPerformed: oznacza, że użytkownik kliknął przycisk działania w wyskakującym komunikacie.
  • SnackbarResult.Dismissed: oznacza, że użytkownik zamknął pasek informacyjny bez kliknięcia przycisku działania.