Tworzenie powiadomienia z paskiem informacji
Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Snackbar to krótki komunikat wyświetlany u dołu ekranu. Udostępnia informacje o wykonywanych operacjach lub działaniach bez zakłócania wygody użytkownika. Paski znikają po kilku sekundach. Użytkownik może też zamknąć powiadomienie, wykonując określone działanie, np. klikając przycisk.
Oto 3 przypadki użycia, w których możesz użyć paska informacji:
- 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 szybkiego dostępu pojawi się komunikat 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.
Zgodność wersji
Ta implementacja wymaga, aby w projekcie ustawiona była minimalna wersja pakietu SDK na poziomie 21 lub wyższym.
Zależności
Tworzenie podstawowego paska przekąsek
Aby zaimplementować snackbar, najpierw utwórz element SnackbarHost, który zawiera właściwość SnackbarHostState. SnackbarHostState zapewnia dostęp do funkcji showSnackbar(), która umożliwia wyświetlanie paska powiadomień.
Ta funkcja zawieszania wymaga CoroutineScope, na przykład rememberCoroutineScope, i może być wywoływana w odpowiedzi na zdarzenia w interfejsie użytkownika, aby wyświetlić Snackbar w Scaffold.
Tworzenie snackbaru z działaniem
Możesz podać opcjonalne działanie i dostosować czas trwania Snackbar.
Funkcja snackbarHostState.showSnackbar() przyjmuje dodatkowe parametry actionLabel i duration oraz zwraca SnackbarResult.
Możesz podać niestandardowy parametr Snackbar za pomocą parametru snackbarHost. Więcej informacji znajdziesz w dokumentacji interfejsu API SnackbarHost.
Wyniki
Rysunek 1. Powiadomienia w pasku powiadomień z możliwością działania.
Kolekcje zawierające ten przewodnik
Ten przewodnik należy do tych kolekcji krótkich przewodników, które obejmują szersze zagadnienia związane z tworzeniem aplikacji na Androida:
Wyświetlanie komponentów interaktywnych
Dowiedz się, jak funkcje składane mogą ułatwić tworzenie atrakcyjnych komponentów interfejsu użytkownika na podstawie systemu projektowania Material Design.
Treść strony i umieszczone na niej fragmenty kodu podlegają licencjom opisanym w Licencji na treści. Java i OpenJDK są znakami towarowymi lub zastrzeżonymi znakami towarowymi należącymi do firmy Oracle lub jej podmiotów stowarzyszonych.
Ostatnia aktualizacja: 2025-02-06 UTC.
[[["Łatwo zrozumieć","easyToUnderstand","thumb-up"],["Rozwiązało to mój problem","solvedMyProblem","thumb-up"],["Inne","otherUp","thumb-up"]],[["Brak potrzebnych mi informacji","missingTheInformationINeed","thumb-down"],["Zbyt skomplikowane / zbyt wiele czynności do wykonania","tooComplicatedTooManySteps","thumb-down"],["Nieaktualne treści","outOfDate","thumb-down"],["Problem z tłumaczeniem","translationIssue","thumb-down"],["Problem z przykładami/kodem","samplesCodeIssue","thumb-down"],["Inne","otherDown","thumb-down"]],["Ostatnia aktualizacja: 2025-02-06 UTC."],[],[],null,["\u003cbr /\u003e\n\nThe [snackbar component](https://material.io/components/snackbars) serves as a brief notification that appears at the\nbottom of the screen. It provides feedback about an operation or action without\ninterrupting the user experience. Snackbars disappear after a few seconds. The\nuser can also dismiss them with an action, such as tapping a button.\n\nConsider these three use cases where you might use a snackbar:\n\n- **Action confirmation:** After a user deletes an email or message, a snackbar appears to confirm the action and offer an \"Undo\" option.\n- **Network status:** When the app loses its internet connection, a snackbar pops up to note that it is now offline.\n- **Data submission:** Upon successfully submitting a form or updating settings, a snackbar notes that the change has saved successfully.\n\nVersion compatibility\n\nThis implementation requires that your project minSDK be set to API level 21\nor higher.\n\nDependencies\n\nCreate a basic snackbar\n\nTo implement a snackbar, you first create [`SnackbarHost`](/reference/kotlin/androidx/compose/material3/package-summary#SnackbarHost(androidx.compose.material3.SnackbarHostState,androidx.compose.ui.Modifier,kotlin.Function1)), which includes a\n[`SnackbarHostState`](/reference/kotlin/androidx/compose/material3/SnackbarHostState) property. `SnackbarHostState` provides access to the\n[`showSnackbar()`](/reference/kotlin/androidx/compose/material3/SnackbarHostState#showsnackbar) function which you can use to display your snackbar.\n\nThis suspending function requires a `CoroutineScope` such as with using\n[`rememberCoroutineScope`](/reference/kotlin/androidx/compose/runtime/package-summary#remembercoroutinescope) --- and can be called in response to UI events to\nshow a [`Snackbar`](/reference/kotlin/androidx/compose/material3/package-summary#snackbar) within `Scaffold`.\n\nCreate a snackbar with action\n\nYou can provide an optional action and adjust the duration of the `Snackbar`.\nThe `snackbarHostState.showSnackbar()` function accepts additional `actionLabel`\nand `duration` parameters, and returns a [`SnackbarResult`](/reference/kotlin/androidx/compose/material3/SnackbarResult).\n\nYou can provide a custom `Snackbar` with the `snackbarHost` parameter. See the\n[`SnackbarHost` API reference docs](/reference/kotlin/androidx/compose/material/package-summary#snackbarhost) for more information.\n\nResults\n\n\n**Figure 1.** Snackbar notifications with action.\n\n\u003cbr /\u003e\n\nCollections that contain this guide\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\nDisplay interactive components \nLearn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-interactive-components) \n\nHave questions or feedback \nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]
