Pasek powiadomień

Komponent paska powiadomień służy jako krótkie powiadomienie wyświetlane w do dołu ekranu. Podaje opinię o operacji lub działaniu bez co przeszkadza użytkownikowi w korzystaniu z aplikacji. Paski powiadomień znikają po kilku sekundach. Użytkownik może też je zamknąć, 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.
• Przesł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 SnackbarHostState. SnackbarHostState umożliwia dostęp do Funkcja showSnackbar(), która służy do wyświetlania paska powiadomień.

Ta funkcja zawieszania wymaga CoroutineScope, na przykład z użyciem rememberCoroutineScope – i może być wywoływane w odpowiedzi na zdarzenia interfejsu użytkownika wyświetlają Snackbar w obrębie 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ć działanie opcjonalne i dostosować czas trwania elementu 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 API SnackbarHost.