Pasek powiadomień

Komponent paska powiadomień pełni rolę krótkiego powiadomienia, które pojawia się u dołu ekranu. Przekazuje informacje zwrotne o operacji lub działaniu, nie zakłócając wrażeń użytkownika. Paski powiadomień znikają po kilku sekundach. Użytkownik może je też odrzucić, wykonując jakąś czynność, np. klikając przycisk.

Rozważ użycie paska powiadomień w tych 3 przypadkach:

• Potwierdzenie działania: gdy użytkownik usunie e-maila lub wiadomość, pojawi się pasek powiadomień z potwierdzeniem działania i opcją „Cofnij”.
• Stan sieci: gdy aplikacja utraci połączenie z internetem, pojawi się pasek powiadomień z informacją, że jest offline.
• Przesyłanie danych: po przesłaniu formularza lub zaktualizowaniu ustawień pasek powiadomień informuje, że zmiana została zapisana.

Podstawowy przykład

Aby wdrożyć pasek powiadomień, najpierw utwórz SnackbarHost, który zawiera właściwość SnackbarHostState. SnackbarHostState zapewnia dostęp do funkcji showSnackbar(), która może służyć do wyświetlania paska powiadomień.

Ta funkcja zawieszania wymaga elementu CoroutineScope, np. przy użyciu rememberCoroutineScope. Można ją wywoływać w odpowiedzi na zdarzenia interfejsu, aby pokazać 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 z przekąskami i akcją

Możesz podać opcjonalne działanie i zmienić czas trwania działania Snackbar. Funkcja snackbarHostState.showSnackbar() akceptuje 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 atrybut Snackbar z parametrem snackbarHost. Więcej informacji znajdziesz w dokumentacji interfejsu API SnackbarHost.