Компонент «Снэк-бар» представляет собой краткое уведомление, которое отображается в нижней части экрана. Он предоставляет обратную связь о выполнении операции или действия, не прерывая работу пользователя. Снэк-бары исчезают через несколько секунд. Пользователь также может закрыть их, выполнив действие, например, нажав кнопку.
Рассмотрим три варианта использования снек-бара:
- Подтверждение действия: после того, как пользователь удаляет электронное письмо или сообщение, появляется панель для подтверждения действия и предлагается опция «Отменить».
- Состояние сети: когда приложение теряет подключение к Интернету, появляется всплывающая панель с уведомлением о том, что оно теперь находится в автономном режиме.
- Отправка данных: после успешной отправки формы или обновления настроек панель уведомлений отобразит, что изменение успешно сохранено.

Простой пример
Чтобы реализовать снэк-бар, сначала создайте SnackbarHost
, включающий свойство SnackbarHostState
. SnackbarHostState
предоставляет доступ к функции showSnackbar()
, которую можно использовать для отображения снэк-бара.
Эта функция приостановки требует CoroutineScope
, например, при использовании rememberCoroutineScope
, и может вызываться в ответ на события пользовательского интерфейса для отображения Snackbar
в 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 }
Закусочная с действием
Вы можете указать необязательное действие и настроить продолжительность показа Snackbar
. Функция snackbarHostState.showSnackbar()
принимает дополнительные параметры actionLabel
и duration
и возвращает 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 }
Вы можете создать собственный Snackbar
с помощью параметра snackbarHost
. Подробнее см. в справочной документации по API SnackbarHost
.
Ключевые моменты
-
actionLabel = "Action"
: Задает текст кнопки действия. -
withDismissAction = true
: отображает крестик в панели закусок. Коснитесь его, чтобы закрыть панель закусок. -
duration = SnackbarDuration.Indefinite
: отображает снэк-бар до тех пор, пока пользователь или программа не закроют его. -
SnackbarResult.ActionPerformed
: означает, что пользователь нажал кнопку действия снэк-бара. -
SnackbarResult.Dismissed
: означает, что пользователь закрыл снэк-бар, не нажав кнопку действия.