Komponent paska powiadomień służy jako krótkie powiadomienie u dołu ekranu. Dostarcza informacji o operacji lub działaniu bez zakłócania wrażeń użytkownika. Paski powiadomień znikają po kilku sekundach. Użytkownik może też zamknąć go jednym działaniem, np. kliknięciem przycisku.
Rozważ te 3 przypadki użycia paska powiadomień:
- Potwierdzenie czynności:gdy użytkownik usunie e-maila lub wiadomość, pojawi się pasek powiadomień z prośbą o potwierdzenie czynności i opcją „Cofnij”.
- Stan sieci: gdy aplikacja utraci połączenie z internetem, pojawi się pasek powiadomień z informacją, że aplikacja 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 element SnackbarHost
zawierający właściwość SnackbarHostState
. SnackbarHostState
zapewnia dostęp do funkcji showSnackbar()
, której możesz użyć do wyświetlenia paska powiadomień.
Ta funkcja zawieszania wymaga klasy CoroutineScope
, np. rememberCoroutineScope
. Można ją wywołać w odpowiedzi na zdarzenia interfejsu, aby wyświetlić Snackbar
w ciągu 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 }
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 }
Możesz podać niestandardową wartość Snackbar
za pomocą parametru snackbarHost
. Więcej informacji znajdziesz w dokumentacji interfejsu SnackbarHost
API.