Pasek powiadomień

Snackbar to krótki komunikat wyświetlany u dołu ekranu. Udostępnia informacje o wykonywanych operacjach lub działaniach bez zakłócania wygody użytkownika. Paski znikają po kilku sekundach. Użytkownik może je też zamknąć, wykonując określone działanie, np. klikając przycisk.

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

  • Potwierdzenie działania: gdy użytkownik usunie e-maila lub wiadomość, pojawi się pasek informacji, aby potwierdzić działanie i zaproponować opcję „Cofnij”.
  • Stan sieci: gdy aplikacja utraci połączenie z internetem, na pasku bocznym pojawi się powiadomienie o tym, że jest teraz offline.
  • Przesyłanie danych: po przesłaniu formularza lub zaktualizowaniu ustawień na pasku bocznym pojawi się komunikat o zapisaniu zmian.
Rysunek 1. Przykłady paska powiadomień

Przykład podstawowy

Aby zaimplementować snackbar, najpierw utwórz element 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 powiadomień.

Ta funkcja zawieszania wymaga CoroutineScope, np. rememberCoroutineScope, i może być wywoływana w odpowiedzi na zdarzenia w interfejsie 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() 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
}
MaterialLayoutSnippets.kt

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

Najważniejsze punkty

  • actionLabel = "Action": ustawia tekst przycisku działania.
  • withDismissAction = true: umożliwia kliknięcie krzyżyka w pasku szybkiego dostępu. Kliknij go, aby zamknąć pasek informacji.
  • duration = SnackbarDuration.Indefinite: pasek będzie wyświetlany, dopóki użytkownik lub program go nie zamknie.
  • SnackbarResult.ActionPerformed: oznacza, że użytkownik kliknął przycisk działania snackbaru.
  • SnackbarResult.Dismissed: oznacza, że użytkownik zamknął pasek informacji, nie klikając przycisku działania.