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ż zamknąć ją jednym działaniem, np. kliknięciem przycisku.

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

• Potwierdzenie działania:gdy użytkownik usunie e-maila lub wiadomość, Pasek powiadomień wyświetla się jako potwierdzenie działania i opcja „Cofnij” .
• Stan sieci: gdy aplikacja utraci połączenie z internetem, pojawi się pasek powiadomień. pojawi się komunikat, że urządzenie 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() 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ć niestandardową wartość Snackbar za pomocą parametru snackbarHost. Zobacz Dokumentacja API SnackbarHost.