Layout tabella a griglia

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

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

Best practice

Utilizza il Grid componibile 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 è specificata all'interno del parametro lambda config, mentre gli elementi dei contenuti dell'interfaccia utente sono 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 dei contenuti, ad esempio column(GridTrackSize.Auto) e row(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 singolo 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 utilizza Grid per disporre gli elementi della tabella. Chiama le funzioni column e row all'interno del 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 modo che si adattino ai contenuti.

All'interno del 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")
    }
}
GridByExamples.kt

Risultati

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

Risorse aggiuntive

• Griglia in Compose
• Imposta le proprietà del container