Краткое руководство для разработчиков
Jetpack Compose приносит нам так много хороших вещей. Работать над UI просто удовольствие по сравнению с XML. Одна из вещей, которые он предлагает нам, — это нестандартный способ реализации нижних листов. Нет необходимости включать какие-либо зависимости. Все уже есть.
Модальные нижние листы представляют набор вариантов, блокируя взаимодействие с остальной частью экрана. Они являются альтернативой встроенным меню и простым диалогам, предоставляя дополнительное пространство для контента, значков и действий. Согласно официальной документации
Мы будем использовать ModalBottomSheetLayout, у которого есть собственное состояние, которое нам нужно запомнить. Итак, давайте продолжим.
Сначала мы создадим sheetState:
Есть три ModalBottomSheetValues:
HiddenExpandedHalfExpanded
Первые два описания достаточно. HalfExpanded будет показывать только половину нижнего листа, и это состояние доступно только в том случае, если высота нижнего листа превышает 50% высоты экрана.
confirmStateChange — это необязательный обратный вызов, вызываемый для подтверждения или наложения вето на ожидающее изменение состояния. С таким значением мы блокируем HalfExpanded значение нижнего листа.
Не забудьте добавить @OptIn(ExperimentalMaterialApi::class), так как это все еще экспериментально.
Теперь мы можем реализовать ModalBottomSheetLayout и поместить внутрь его содержимого весь экран. Наш экран будет выглядеть так:
Как мы видим, мы поместили составные элементы экрана внутрь содержимого ModalBottomSheetLayout. Также мы передаем sheetState в качестве аргумента.BackHandler — это эффект обработки нажатия системной кнопки «Назад». Первый аргумент — это когда он включен, а второй — что он должен делать, когда нажимается системная кнопка «Назад».
В этом случае мы просто хотим скрыть нижний лист, если он отображается и нажата системная кнопка «Назад».
Button внутри Column показывает и скрывает нижний лист. sheetState.show() покажет нижний лист с анимацией, а sheetState.hide() скроет нижний лист с анимацией.
И последнее, что нам нужно здесь увидеть, это BottomSheet компонуемость:
Это действительно простой столбец, заполненный текстом. Вы можете положить сюда все, что хотите.
Если вы хотите иметь несколько кнопок, которые что-то делают, вы просто будете общаться через обратные вызовы с основным компонуемым.
Это довольно простая логика, но ее очень полезно знать. Одно замечание: логика отображения и скрытия нижнего листа заложена в пользовательском интерфейсе, но она должна обрабатываться ViewModel. Это немного выходит за рамки этой статьи, так как я просто хотел показать, как вы можете создать нижний лист.
Это было бы все для этой статьи. Надеюсь, вам понравилось!
Весь исходный код вы можете найти в моем репозитории GitHub.
Want to Connect? GitHub LinkedIn Twitter Portfolio website
Если вы хотите узнать о запросе разрешений в Jetpack Compose, ознакомьтесь с этими статьями:
