Должен ли ModalBottomSheetLayout в Jetpack Compose использоваться в качестве контейнера для всего экрана?

Как можно реализовать несколько переиспользуемых BottomSheetDialogs на одном экране в Jetpack Compose, учитывая что использование `ModalBottomSheetLayout` предполагает его обёртывание вокруг контента экрана? Существуют ли стандартные подходы для реализации этого без перехода на Material Design 3?
  • 4 декабря 2023 г. 10:10
Ответы на вопрос 1
По состоянию на текущий момент (начало 2023 года), `ModalBottomSheetLayout` в Jetpack Compose рассматривается как контейнер, который оборачивает весь экран (контент). Это означает, что если вы пытаетесь реализовать несколько различных `BottomSheet` на одном экране, то возникают проблемы, так как в текущей реализации `ModalBottomSheetLayout` не поддерживает несколько одновременно активных панелей. Для решения этой задачи можно принять во внимание следующие подходы:

**1. Использование нескольких состояний `ModalBottomSheetState`:**
Вы можете создать разные состояния `ModalBottomSheetState` для каждого `BottomSheet` и в зависимости от контекста отображения переключать между ними.

```kotlin
val sheetState1 = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden)
val sheetState2 = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden)
// Так далее для каждого BottomSheet

ModalBottomSheetLayout(
    sheetState = when (какое-то условие) {
        true -> sheetState1
        else -> sheetState2
    },
    sheetContent = {
        when (какое-то условие) {
            true -> { /* Контент для первого BottomSheet */ }
            else -> { /* Контент для второго BottomSheet */ }
        }
    }
) {
    // Основной контент экрана
}
```

**2. Локальное управление состоянием**
Создайте локальные состояния для разных `BottomSheet` в пределах экрана, на котором они показаны, и контролируйте их отображение в зависимости от вашего текущего состояния или событий.

**3. Создание собственного компонента**
Если вам нужно больше гибкости, чем предоставляет `ModalBottomSheetLayout`, вы можете создать свой собственный компонент для `BottomSheet`, который будет использовать `Box` и `AnimatedVisibility` для показа и скрытия контента.

**4. Использование диалогов**
В качестве альтернативы, вместо `BottomSheet`, можно использовать `AlertDialog` или `Dialog` для модальных окон на всём экране.

Нобсуждаемые подходы могут потребовать дополнительной работы и могут иметь свои ограничения в возможностях реализации сложной логики взаимодействия и отображения. Переход на Material Design 3 может добавить новые компоненты и подходы к реализации `BottomSheet`, упрощая эту задачу, но в настоящий момент такие изменения не введены в Jetpack Compose.
Похожие вопросы