Оверлеи элементов интерфейса с макетом grid

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

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

Рекомендации

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

Ингредиенты

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

Шаги

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

1. Как задать конфигурацию сетки

Создайте composable-конфигурацию 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. Разместите основной контент и объявите оверлеи

Разместите базовые composable-функции в ячейках сетки с помощью Modifier.gridItem. Grid следует стандартному порядку zIndex, основанному на порядке композиции, поэтому элементы, объявленные позже в блоке Grid, рисуются поверх более ранних элементов. При размещении оверлея в той же ячейке или перекрывающейся области объявите composable-функцию оверлея после базового элемента или сошлитесь на именованную область. Если вам нужно явно управлять порядком отрисовки или переопределить его, используйте 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

Результаты

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

Рисунок 1. Перекрывающиеся элементы интерфейса в сетке Compose.