Definir propriedades do contêiner

É possível definir uma configuração de contêiner de grade para criar layouts flexíveis que respondem a diferentes tamanhos de tela e tipos de conteúdo. Nesta página, descrevemos como fazer o seguinte:

• Definir uma grade: configure a estrutura básica de linhas e colunas.
• Colocar itens em uma grade: entenda como os itens são colocados em células de grade e como mudar a direção do fluxo.
• Gerenciar dimensionamento de faixas: use dimensionamento fixo, fracionário, flexível e intrínseco para definir os tamanhos das faixas.
• Definir lacunas: gerencie as "margens" entre linhas e colunas.

Definir uma grade

Uma grade consiste em colunas e linhas. O elemento combinável Grid tem um parâmetro config que aceita uma lambda para definir as colunas e linhas em GridConfigurationScope. O exemplo a seguir define uma grade com três linhas e duas colunas, cada uma com um tamanho fixo especificado em Dp:

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

Colocar itens em uma grade

O Grid pega os elementos da interface na lambda content e os coloca em células de grade. A grade organiza os itens, mesmo que você não tenha definido explicitamente as linhas e colunas. Por padrão, o Grid tenta colocar um elemento da interface na célula de grade disponível na linha. Se não for possível, ele coloca em uma célula de grade disponível na próxima linha. Se não houver células vazias, o Grid vai criar uma nova linha.

No exemplo a seguir, a grade tem seis células e coloca um card em cada uma delas (Figura 1). Cada célula da grade tem 160dp x 90dp, o que torna o tamanho total da grade 320dp x 270dp.

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

Para mudar esse comportamento padrão para preenchimento por coluna, defina a propriedade flow como 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

Gerenciar dimensionamento de faixas

As linhas e colunas são chamadas coletivamente de faixa de grade. É possível especificar o tamanho de uma faixa de grade usando um dos seguintes métodos:

• Fixo (Dp): aloca um tamanho específico (por exemplo, column(180.dp)).
• Fracionário (Float): aloca uma porcentagem do espaço total disponível de 0.0f a 1.0f (por exemplo, row(0.5f) para 50%).
• Flexível (Fr): distribui o espaço restante proporcionalmente depois que as faixas fixas e fracionadas são calculadas. Por exemplo, se duas linhas forem definidas como 1.fr e 3.fr, a última receberá 75% da altura restante.
• Intrínseco: dimensiona a faixa com base no conteúdo dela. Para mais informações, consulte Determinar o tamanho da faixa da grade intrinsecamente.

O exemplo a seguir usa as diferentes opções de dimensionamento de faixa para definir as alturas das linhas:

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

Determinar o tamanho da faixa da grade intrinsecamente

Você pode usar o dimensionamento intrínseco para um Grid quando quiser que o layout se adapte ao conteúdo, em vez de forçá-lo a um contêiner fixo. O tamanho da faixa da grade é determinado com os seguintes valores:

• GridTrackSize.MaxContent: use o tamanho intrínseco máximo do conteúdo (por exemplo, a largura é determinada pelo comprimento total do texto em um bloco de texto sem ajuste).
• GridTrackSize.MinContent: use o tamanho intrínseco mínimo do conteúdo (por exemplo, a largura é determinada pela palavra única mais longa em um bloco de texto).
• GridTrackSize.Auto: use um tamanho flexível para uma faixa que se adapta com base no espaço disponível. Ele se comporta como MaxContent por padrão, mas reduz e encapsula o conteúdo para caber no contêiner principal.

O exemplo a seguir coloca dois textos lado a lado. O tamanho da coluna do primeiro texto é determinado pela largura mínima necessária para mostrar o texto, e a largura da segunda coluna depende da largura máxima necessária do texto.

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

Definir lacunas entre linhas e colunas

Depois que os rastreamentos da grade forem dimensionados, você poderá modificar o espaço da grade para refinar o espaçamento entre eles. É possível especificar o espaçamento entre colunas com a função columnGap e o espaçamento entre linhas com rowGap. No exemplo a seguir, há uma lacuna de 16dp entre cada linha e uma lacuna de 8dp entre cada coluna (Figura 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

Você também pode usar a função de conveniência gap para definir lacunas do mesmo tamanho de coluna e linha e definir tamanhos de coluna e lacuna separadamente usando uma única função. O código a seguir adiciona lacunas 8dp à grade:

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