Закусочная

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

Рассмотрим эти три варианта использования закусочной:

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

Базовый пример

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