Layout tabella a griglia

Icona di valutazione a quattro stelle

Questa formula mostra come l'API Grid migliora la leggibilità del codice rispetto alle strutture nidificate tradizionali. Configurando le tracce con dimensionamento automatico, puoi creare una griglia che si adatta dinamicamente alla larghezza e all'altezza delle celle in base alle dimensioni intrinseche dei composabili di testo.

In questa ricetta, creerai una tabella utilizzando l'API Grid.

Tabella 1. Confronto delle funzionalità delle API FlexBox e Grid
Layout Caricamento lento A capo automatico Aggiornamento del layout dinamico
FlexBox 1G No Sì Sì
Grid 2D No No Sì

Best practice

Utilizza il componibile Grid per migliorare la leggibilità e la manutenibilità della tabella. Grid ti offre un controllo preciso sulle dimensioni e sull'allineamento delle colonne in tutte le righe senza sincronizzare manualmente le larghezze.

Ingredienti

  • Grid: un layout componibile che posiziona gli elementi in una griglia bidimensionale. La configurazione del layout viene specificata all'interno del parametro lambda config, mentre gli elementi dei contenuti della UI vengono dichiarati all'interno del parametro lambda content.
  • GridTrackSize.Auto: Specifica il dimensionamento automatico delle tracce all'interno della configurazione della griglia in base alle dimensioni intrinseche del contenuto, ad esempio, column(GridTrackSize.Auto) Erow(GridTrackSize.Auto).
  • gap(): configura la spaziatura tra righe e colonne all'interno di GridConfigurationScope, ad esempio gap(row = 8.dp, column = 16.dp).

Passaggi

Crea una tabella di confronto a più colonne utilizzando un unico layout Grid con allineamento automatico delle colonne e dimensionamento delle tracce per tutti gli elementi.

1. Conta le righe e le colonne della griglia per determinare le dimensioni delle tracce

Innanzitutto, conta le colonne e le righe per determinare le dimensioni delle tracce:

  • Colonne: il numero di attributi che stai confrontando, più una colonna per il nome dell'elemento.
  • Righe: il numero di elementi che stai confrontando, più una riga di intestazione.

Per questa ricetta che confronta due componenti (FlexBox e Grid) in base a quattro attributi, sono necessarie cinque colonne e tre righe.

2. Implementa la tabella di confronto utilizzando Grid

Crea un componibile TableInGrid che utilizzi Grid per disporre gli elementi della tabella. Chiama le funzioni column e row all'interno della funzione lambda config per definire le dimensioni delle tracce e imposta la spaziatura delle celle con gap(). Poiché il testo ha dimensioni intrinseche, GridTrackSize.Auto ridimensiona automaticamente le colonne e le righe in base ai contenuti.

All'interno della funzione lambda content, inserisci le intestazioni e i dati della tabella. Grid gestisce automaticamente il posizionamento e l'allineamento di tutte le celle:

@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")
    }
}

Risultati

Ora hai creato una tabella di confronto bidimensionale pulita con allineamento automatico delle colonne e spaziatura tra le celle.

Figura 1. La tabella di confronto che utilizza un Grid.

Risorse aggiuntive