Установить свойства элемента

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

Установить положение элемента

Поместите элемент в определенную дорожку или ячейку, указав параметры row и column .

Параметры row и column определяют индексы строк и столбцов, в которые помещается элемент. Индексы дорожек начинаются с единицы. Указание только row или column (но не обоих) помещает элемент в следующее доступное место в этой дорожке. Указание обоих индексов помещает элемент в эту ячейку.

Используйте положительное целое число, чтобы указать индекс дорожки с самого начала. Например, чтобы разместить элемент в первой строке и первом столбце, используйте gridItem(row = 1, column = 1) .

Используйте отрицательное целое число, чтобы указать направление относительно конца. Например, чтобы разместить элемент во второй с конца строке и столбце, используйте gridItem(row = -2, column = -2) .

В следующем примере карточка № 2 помещается во вторую строку и второй столбец. Карточка № 3 назначается в последнюю строку (с индексом -1), где она автоматически занимает первый доступный столбец в этой дорожке (Рисунок 1).

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp)
    }
) {
    Card1()
    Card2(modifier = Modifier.gridItem(row = 2, column = 2))
    Card3(modifier = Modifier.gridItem(row = -1, column = -2))
}
GridItem.kt

Охватывает строки и столбцы

Используйте параметры rowSpan и columnSpan , чтобы разместить элемент на нескольких ячейках. Вы можете разместить элемент пользовательского интерфейса в области сетки , которая представляет собой область, состоящую из нескольких ячеек сетки . Модификатор gridItem позволяет указать область сетки с помощью параметров rowSpan и columnSpan . В следующем примере карточка № 1 размещена в области, состоящей из двух строк и двух столбцов (Рисунок 2).

Grid(
    config = {
        repeat(3) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(8.dp)
        columnGap(8.dp)
    }
) {
    Card1(modifier = Modifier.gridItem(rowSpan = 2, columnSpan = 2))
    Card2()
    Card3()
    Card4(modifier = Modifier.gridItem(columnSpan = 3))
}
GridArea.kt

Выровняйте объект в пределах сетки.

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

Grid(
    config = {
        repeat(3) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(8.dp)
        columnGap(8.dp)
    },
) {
    Text(
        text = "#1",
        modifier = Modifier
            .gridItem(
                rowSpan = 2,
                columnSpan = 2,
                alignment = Alignment.Center
            ),
    )
    Card2()
    Card3()
    Card4(modifier = Modifier.gridItem(columnSpan = 3))
}
GridArea.kt

Автоматическое размещение в сочетании с размещенными предметами

Элемент пользовательского интерфейса в Grid , не имеющий указания положения, размещается автоматически. В этом примере показано, как можно комбинировать элементы, размещаемые автоматически, и элементы пользовательского интерфейса с указанными ячейками сетки. Карточки № 2 и № 4 представляют собой указанные ячейки сетки, а остальные элементы размещаются автоматически.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(16.dp)
        columnGap(8.dp)
    }
) {
    Card1()
    Card2(modifier = Modifier.gridItem(row = 2, column = 2))
    Card3()
    Card4(modifier = Modifier.gridItem(row = 3, column = 1))
    Card5()
    Card6()
}
GridItem.kt