Задать свойства контейнера

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

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

Определите сетку

Сетка состоит из столбцов и строк. Компонент Grid имеет параметр config , который принимает лямбда-выражение для определения столбцов и строк в пределах GridConfigurationScope . В следующем примере определяется сетка, имеющая три строки и два столбца, каждый с фиксированным размером, заданным в Dp :

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
}
DefineGrid.kt

Разместите предметы в сетке.

Grid берет элементы пользовательского интерфейса из лямбда-функции content и помещает их в ячейки сетки. Сетка размещает элементы независимо от того, были ли явно определены строки и столбцы. По умолчанию Grid пытается разместить элемент пользовательского интерфейса в доступной ячейке сетки в строке; если это не удается, он размещает его в доступной ячейке сетки в следующей строке. Если пустых ячеек нет, Grid создает новую строку.

В следующем примере сетка состоит из шести ячеек, и в каждую из них помещается карта (Рисунок 1). Каждая ячейка сетки имеет 160dp x 90dp , что делает общий размер сетки 320dp x 270dp .

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
DefineGrid.kt

Рисунок 1. Шесть карт размещены в сетке, состоящей из трех рядов и двух столбцов.

Чтобы изменить это поведение по умолчанию на заполнение по столбцам, установите свойство flow в GridFlow.Column .

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp)
        flow = GridFlow.Column // Grid tries to place items to fill the column
    },
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridItem.kt

Рисунок 2. GridFlow.Row (слева) и GridFlow.Column (справа).

Управление размерами пути

Строки и столбцы в совокупности называются сеткой . Размер сетки можно задать одним из следующих способов:

• Фиксированный размер ( Dp ): выделяет определенный размер (например, column(180.dp) ).
• Дробный ( Float ): выделяет определенный процент от общего доступного пространства от 0.0f до 1.0f (например, row(0.5f) для 50%).
• Гибкий ( Fr ): Распределяет оставшееся пространство пропорционально после расчета фиксированных и дробных значений. Например, если двум строкам заданы значения 1.fr и 3.fr , то последняя получает 75% оставшейся высоты.
• Внутренний параметр : Задает размер дорожки в зависимости от ее содержимого. Для получения дополнительной информации см. раздел «Определение размера дорожки сетки внутренним параметром» .

В следующем примере для определения высоты строк используются различные параметры размера дорожек:

Grid(
    config = {
        column(1f)

        row(100.dp)
        row(0.2f)
        row(1.fr)
        row(GridTrackSize.Auto)
    },
    modifier = Modifier.height(480.dp)
) {
    PastelRedCard("Fixed(100.dp)")
GridTrackSize.kt

Рисунок 3. Высота строк определяется с использованием четырех основных параметров размера дорожек в Grid .

Определяйте размер сетки непосредственно по умолчанию.

Встроенные размеры Grid можно использовать, если вы хотите, чтобы макет адаптировался к содержимому, а не помещался в фиксированный контейнер. Размер дорожки сетки определяется следующими значениями:

• GridTrackSize.MaxContent : Используйте максимальный внутренний размер содержимого (например, ширина определяется полной длиной текста в текстовом блоке без переноса строк).
• GridTrackSize.MinContent : Используйте минимальный внутренний размер содержимого (например, ширина определяется самым длинным отдельным словом в текстовом блоке).
• GridTrackSize.Auto : Используйте гибкий размер для дорожки, который адаптируется в зависимости от доступного пространства. По умолчанию он ведет себя как MaxContent , но сжимает и оборачивает свое содержимое, чтобы поместиться внутри родительского контейнера.

В следующем примере два текста расположены рядом. Размер столбца для первого текста определяется минимальной требуемой шириной для его отображения, а ширина второго столбца зависит от максимальной требуемой ширины текста.

Grid(
    config = {
        column(GridTrackSize.MinContent)
        column(GridTrackSize.MaxContent)
        row(1.0f)
    },
    modifier = Modifier.width(480.dp)
) {
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet." )
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet." )
}
GridTrackSize.kt

Рисунок 4. В столбцах указаны внутренние размеры.

Задайте расстояние между строками и столбцами.

После того, как вы задали размер дорожек сетки, вы можете изменить зазор между дорожками, чтобы уточнить расстояние между ними. Зазор между столбцами можно указать с помощью функции columnGap , а зазор между строками — с помощью rowGap . В следующем примере зазор между каждой строкой составляет 16dp , а между каждым столбцом 8dp (Рисунок 5).

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(16.dp)
        columnGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridGap.kt

Рисунок 5. Промежутки между строками и столбцами.

Также можно использовать вспомогательную функцию gap для определения промежутков одинакового размера столбца и строки, а также для определения размеров столбца и промежутка отдельно с помощью одной функции. Следующий код добавляет в сетку промежутки 8dp :

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp) // Equivalent to columnGap(8.dp) and rowGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridGap.kt