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