Pasek powiadomień

Snackbar to krótki komunikat wyświetlany u dołu ekranu. dostarcza informacji o wykonywanych operacjach lub działaniach bez zakłócania korzystania z aplikacji; Paski znikają po kilku sekundach. Użytkownik może też zamknąć powiadomienie, 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, który potwierdzi to działanie i zaoferuje 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.

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óra umożliwia wyświetlanie paska powiadomień.

Ta funkcja zawieszania wymaga CoroutineScope, na przykład rememberCoroutineScope. 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.