Pasek powiadomień

Snackbar to krótkie powiadomienie wyświetlane u dołu ekranu. Udostępnia informacje 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.

Rozważ te 3 przypadki użycia paska powiadomień:

• Potwierdzenie działania: gdy użytkownik usunie e-maila lub wiadomość, pojawi się pasek informacji, aby potwierdzić to 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.

Przykład podstawowy

Aby wdrożyć pasek powiadomień, najpierw utwórz element SnackbarHost zawierający właściwość SnackbarHostState. SnackbarHostState zapewnia dostęp do funkcji showSnackbar(), która umożliwia wyświetlanie paska powiadomień.

Ta funkcja zawieszania wymaga CoroutineScope, np. 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 funkcją działania

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