Наложение элементов пользовательского интерфейса с помощью сетки

API Jetpack Compose Grid предназначен для структурированных двухмерных макетов экрана. В отличие от ленивых сеток, оптимизированных для больших наборов данных, Grid позволяет определять фиксированную или адаптивную структуру макета с помощью дорожек (строк и столбцов), промежутков и областей сетки . Вы размещаете элементы в этой структуре с помощью Modifier.gridItem , что дает вам явный контроль над позиционированием и распределением внутри контейнера сетки.

Когда в пользовательском интерфейсе требуется разместить несколько элементов в одной и той же области сетки или в перекрывающихся областях — например, наложения значков, индикаторы состояния или многослойные карточки — неоднозначность координат может сделать поведение компоновки непредсказуемым. Управление глубиной перекрывающихся компонентов без использования сложных методов вложенности Box или ручного смещения координат имеет важное значение для поддержания чистого и читаемого кода компоновки.

Передовые методы

• Порядок объявления: Grid следует стандартному порядку zIndex , основанному на порядке объявления внутри блока Grid . Элементы, объявленные позже в блоке содержимого Grid отображаются поверх элементов, объявленных ранее.
• Явное управление z-индексом: используйте Modifier.zIndex если вам необходимо явно контролировать или переопределять порядок отрисовки перекрывающихся элементов по умолчанию.
• Именованные области против наложений элементов: используйте Grid и именованные области для определения структуры макета, но сохраняйте сложную логику наложений внутри конкретного gridItem , если эти наложения логически связаны с данной ячейкой сетки.
• Преднамеренное использование диапазонов для наложений: При наложении убедитесь, что параметры rowSpan и columnSpan заданы намеренно для перекрывающихся элементов, чтобы контролировать, насколько сильно скрывается нижележащее содержимое.

Ингредиенты

• Grid : структурный двухмерный контейнер для компоновки.
• GridConfigurationScope.area : Функция области видимости, используемая для определения именованных регионов и областей наложения на дорожках сетки.
• Modifier.gridItem : Модификатор, используемый для размещения и распределения составных элементов по дорожкам сетки или в именованные области сетки.
• Modifier.zIndex : Модификатор, используемый для явного управления порядком отрисовки и высоты слоев.

Шаги

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

1. Определите конфигурацию сетки.

Создайте составную конфигурацию Grid , указав дорожки для строк и столбцов, а также именованные области, которые охватывают ячейки для определения областей наложения:

enum class Areas { BASE, OVERLAY }

val gridConfig: GridConfigurationScope.() -> Unit = {
    repeat(3) {
        column(GridTrackSize.Fixed(100.dp))
    }
    row(GridTrackSize.Fixed(100.dp))

    area(areaId = Areas.BASE, row = 1, column = 1, columnSpan = 2)
    // Define a named area spanning multiple columns that overlaps other cells
    area(areaId = Areas.OVERLAY, row = 1, column = 2, columnSpan = 2)
}
GridByExamples.kt

2. Разместите базовое содержимое и объявите наложения.

Размещайте базовые элементы, являющиеся составными, в ячейках сетки, используя Modifier.gridItem . Grid следует стандартному порядку zIndex , основанному на порядке композиции, поэтому элементы, объявленные позже в блоке Grid отображаются поверх более ранних элементов. При размещении наложения в той же ячейке или в перекрывающейся области, объявите элемент, являющийся составным, после базового элемента или укажите именованную область. Вы можете использовать Modifier.zIndex если вам необходимо явно контролировать или переопределять этот порядок отрисовки по умолчанию.

Grid(
    config = gridConfig,
) {
    // Base Layer
    TextCard("BASE", Modifier.gridItem(areaId = Areas.BASE))
    // Overlay Layer
    TextCard(
        "OVERLAY",
        Modifier.gridItem(areaId = Areas.OVERLAY),
        color = Color(0xDD4B608D)
    )
}
GridByExamples.kt

Результаты

Элементы пользовательского интерфейса предсказуемо располагаются внутри двухмерной сетки. Используя стандартный порядок объявления, вы избегаете сложных вложенных контейнеров, сохраняя при этом чистый и адаптивный код компоновки.