Закуски в номере

Компонент 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
}

Всплывающее уведомление с действием

Вы можете добавить необязательное действие и настроить длительность показа 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" – задает текст командной кнопки.
  • duration = SnackbarDuration.Indefinite – всплывающее уведомление показывается, пока пользователь или программа не закроет его.
  • SnackbarResult.ActionPerformed – пользователь нажал кнопку действия на всплывающем уведомлении.
  • SnackbarResult.Dismissed – пользователь закрыл всплывающее уведомление, не нажимая кнопку действия.