Definir propriedades do item

Embora a configuração Grid defina a estrutura geral, você usa o modificador gridItem para controlar a posição, a abrangência, e o alinhamento dos itens nessa 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 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 os dois 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 #2 é colocado na segunda linha e na segunda coluna. O card #3 é atribuído à última linha (indexada por -1), em que 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))
}

O card nº 2 é colocado na célula da grade na segunda linha e na segunda coluna, e o card nº 3 é colocado na primeira coluna da terceira linha.
Figura 1. O card #2 é colocado na célula da grade na segunda linha e na segunda coluna, e o card #3 é colocado na primeira coluna na terceira linha.

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 da grade, que é a área composta por várias células da grade. O modificador gridItem permite especificar a área da grade com os parâmetros rowSpan e columnSpan. No exemplo a seguir, o card #1 é colocado na área composta por 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))
}

O card nº 4 ocupa três colunas
Figura 2. O card #4 abrange três colunas.

Definir o alinhamento em uma área da grade

É possível definir o alinhamento do elemento da interface em uma área da grade especificando-o no parâmetro alignment do modificador gridItem. No exemplo a seguir, #1 é colocado no centro da área da grade composta por 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))
}

O texto com #1 é colocado no centro da área da grade, que consiste em duas linhas e duas colunas.
Figura 3. O texto com #1 é colocado no centro da área da grade consistindo de duas linhas e duas colunas.

Posicionamento automático misturado com itens colocados

Um elemento da interface em Grid que não tem especificação de posição passa por um posicionamento automático. Este exemplo mostra como misturar elementos posicionados automaticamente e elementos de interface com células de grade especificadas. O card #2 e o card #4 são 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()
}

O card nº 3 é colocado ao lado do card <b>nº 1</b>, já que é uma seleção automática.
Figura 4. O card #3 é colocado ao lado do card #1, porque é um posicionamento automático.