Layout de tabela em grade

Ícone de classificação de quatro estrelas

Esta receita mostra como a Grid API melhora a legibilidade do código em comparação com as estruturas aninhadas tradicionais. Ao configurar faixas de tamanho automático, você pode criar uma grade que se adapta dinamicamente à largura e altura da célula com base no tamanho intrínseco dos elementos combináveis de texto.

Nesta receita, você vai criar uma tabela usando a API Grid.

Tabela 1. Comparação de recursos das APIs FlexBox e Grid
Layout Carregamento lento Quebra suave Atualização de layout dinâmico
FlexBox 1D Não Sim Sim
Grid 2D Não Não Sim

Práticas recomendadas

Use o elemento combinável Grid para melhorar a legibilidade e a capacidade de manutenção da tabela. Grid oferece controle preciso sobre as dimensões e o alinhamento das colunas em todas as linhas sem sincronizar as larguras manualmente.

Ingredientes

  • Grid: um layout combinável que coloca itens em uma grade bidimensional. A configuração do layout é especificada dentro do parâmetro lambda config, enquanto os itens de conteúdo da interface são declarados dentro do parâmetro lambda content.
  • GridTrackSize.Auto: especifica o dimensionamento automático da faixa na configuração da grade com base no tamanho intrínseco do conteúdo, por exemplo, column(GridTrackSize.Auto) e row(GridTrackSize.Auto).
  • gap(): configura o espaçamento de linhas e colunas em GridConfigurationScope, como gap(row = 8.dp, column = 16.dp).

Etapas

Crie uma tabela de comparação de várias colunas usando um único layout Grid com alinhamento automático de colunas e dimensionamento de faixas para todos os itens.

1. Contar linhas e colunas da grade para determinar os tamanhos das faixas

Primeiro, conte as colunas e linhas para determinar o tamanho das faixas:

  • Colunas: o número de atributos que você está comparando, mais uma coluna para o nome do item.
  • Linhas: o número de itens que você está comparando, mais uma linha de cabeçalho.

Para esta receita que compara dois componentes (FlexBox e Grid) em quatro atributos, você precisa de cinco colunas e três linhas.

2. Implementar a tabela de comparação usando a grade

Crie um elemento combinável TableInGrid que usa Grid para dispor os itens da tabela. Chame as funções column e row dentro da lambda config para definir os tamanhos das faixas e defina o espaçamento das células com gap(). Como o texto tem tamanho intrínseco, GridTrackSize.Auto dimensiona automaticamente colunas e linhas para ajustar o conteúdo.

Dentro da lambda content, coloque os cabeçalhos e dados da tabela. Grid processa automaticamente o posicionamento e o alinhamento de todas as células:

@Composable
fun TableInGrid(
    modifier: Modifier = Modifier,
) {
    Grid(
        config = {
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            gap(row = 8.dp, column = 16.dp)
        },
        modifier = modifier,
    ) {
        // Table Header
        Text(text = "", fontWeight = FontWeight.Bold)
        Text(text = "Layout", fontWeight = FontWeight.Bold)
        Text(text = "Lazy loading", fontWeight = FontWeight.Bold)
        Text(text = "Soft wrap", fontWeight = FontWeight.Bold)
        Text(text = "Dynamic layout update", fontWeight = FontWeight.Bold)

        // FlexBox Row
        Text(text = "FlexBox", fontWeight = FontWeight.Bold)
        Text(text = "1D")
        Text(text = "No")
        Text(text = "Yes")
        Text(text = "Yes")

        // Grid Row
        Text(text = "Grid", fontWeight = FontWeight.Bold)
        Text(text = "2D")
        Text(text = "No")
        Text(text = "No")
        Text(text = "Yes")
    }
}

Resultados

Agora você criou uma tabela de comparação bidimensional limpa com alinhamento automático de colunas e espaçamento entre células.

Figura 1. A tabela de comparação usando uma Grid.

Outros recursos