Definir propriedades do item

Enquanto a configuração Grid define a estrutura geral, use o modificador gridItem para controlar a posição, o alcance e o alinhamento dos itens dentro dessa estrutura.

Definir a posição do item

Coloque um item em uma faixa ou célula específica com os parâmetros row e column. Os índices de coordenadas funcionam melhor para layouts de grade simples. Para layouts maiores ou mais complexos, defina áreas nomeadas.

Os parâmetros row e column especificam os índices de faixa de linha e coluna em que o item é colocado. Os índices de faixa são baseados em 1, ou seja, começam em um. Especificar apenas row ou column (não ambos) coloca o item no próximo espaço disponível nessa faixa. Especificar ambos coloca o item nessa célula.

Use um número inteiro positivo para especificar o índice da faixa desde o início. Por exemplo, para colocar um item na primeira linha e coluna, use gridItem(row = 1, column = 1).

Use um número inteiro negativo para especificar a faixa em relação ao final. Por exemplo, para colocar um item na penúltima linha e coluna, use gridItem(row = -2, column = -2).

No exemplo a seguir, o card nº 2 é colocado na segunda linha e na segunda coluna. O card nº 3 é atribuído à última linha (indexada por -1), em que ele ocupa automaticamente a primeira coluna disponível nessa faixa (Figura 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

Abranger linhas e colunas

Use os parâmetros rowSpan e columnSpan para abranger um item em várias células. É possível colocar um elemento da interface em uma área de grade, que é a área composta por várias células de grade. O modificador gridItem permite especificar a área da grade com os parâmetros rowSpan e columnSpan. No exemplo a seguir, o cartão nº 1 é colocado na área que consiste em duas linhas e duas colunas (Figura 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

Definir o alinhamento em uma área de grade

É possível definir o alinhamento do elemento da interface em uma área de grade especificando-o no parâmetro alignment do modificador gridItem. No exemplo a seguir, #1 é colocado no centro da área da grade, que consiste em duas colunas e duas linhas.

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

Posicionamento automático misturado com itens posicionados

Um elemento da interface em Grid que não tem especificação de posição passa por posicionamento automático. Este exemplo mostra como misturar elementos posicionados automaticamente e os elementos da interface com células de grade especificadas. Os cards 2 e 4 são colocados em células de grade especificadas, e os outros itens são posicionados automaticamente.

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