Layout de tabela em grade

Ícone de avaliação de quatro estrelas

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

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 de linha flexível 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 de composição Grid para melhorar a legibilidade e a manutenção da tabela. O 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 no parâmetro lambda config, enquanto os itens de conteúdo da interface são declarados no parâmetro lambda content.
  • GridTrackSize.Auto: especifica o dimensionamento automático de faixas 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, além de 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 tabela de comparação usando Grid

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

Dentro da lambda content, coloque os cabeçalhos e os dados da tabela. O 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

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 um Grid.

Outros recursos