Закусочная

Компонент Snackbar служит в качестве краткого уведомления, которое появляется в нижней части экрана. Он обеспечивает обратную связь об операции или действии, не прерывая пользовательский опыт. Snackbar исчезают через несколько секунд. Пользователь также может закрыть их действием, например, нажатием кнопки.

Рассмотрим три варианта использования снэк-бара:

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

Простой пример

Чтобы реализовать снэк-бар, сначала нужно создать 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
}
MaterialLayoutSnippets.kt

Закусочная с действием

Вы можете указать необязательное действие и настроить продолжительность 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
}
MaterialLayoutSnippets.kt

Вы можете предоставить пользовательский Snackbar с параметром snackbarHost . См. справочную документацию API SnackbarHost для получения дополнительной информации.

Ключевые моменты

  • actionLabel = "Action" : Устанавливает текст кнопки действия.
  • withDismissAction = true : Поставляет крестик в снэк-баре. Нажмите его, чтобы закрыть снэк-бар.
  • duration = SnackbarDuration.Indefinite : Сохраняет снэк-бар отображаемым до тех пор, пока пользователь или программа не закроют его.
  • SnackbarResult.ActionPerformed : Означает, что пользователь нажал кнопку действия снэк-бара.
  • SnackbarResult.Dismissed : означает, что пользователь закрыл снэк-бар, не нажав кнопку действия.