Griglia

Grid è un'API Jetpack Compose che ti consente di implementare in modo flessibile un layout bidimensionale. Con questa API, puoi visualizzare gli elementi in layout a più colonne o più righe che si adattano alle dimensioni del contenitore disponibile.

Un layout bidimensionale flessibile e adattivo con Grid
Figura 1. Un layout bidimensionale flessibile e adattabile con Grid.

In che modo Grid si differenzia da composabili simili?

Compose offre già componenti simili, come LazyVerticalGrid. Questi componenti servono principalmente per la visualizzazione di set di dati omogenei di grandi dimensioni, ad esempio per mostrare un catalogo di contenuti in un'app di streaming video. Questi componenti NON sono progettati per il layout strutturale di uno schermo o di un componente complesso.

Puoi anche implementare un layout bidimensionale combinando più elementi componibili Row e Column. Tuttavia, questo approccio presenta alcuni svantaggi, come gerarchie profonde e difficoltà di adattabilità.

La tabella seguente fornisce una panoramica dei layout adatti a ciascuna API:

Componente Finalità
LazyVerticalGrid, LazyStaggeredGrid e LazyHorizontalGrid Visualizzazione di set di dati omogenei di grandi dimensioni che richiedono il caricamento lento.
Row, Column e FlexBox Layout unidimensionale
Grid Layout bidimensionale

Terminologia

Acquisisci familiarità con la seguente terminologia per capire come funziona Grid.

Linea della griglia

Una griglia è composta da linee che si estendono in orizzontale e in verticale. Se la griglia ha tre righe, ha quattro linee orizzontali, inclusa quella dopo l'ultima riga. Nell'immagine seguente, ogni linea tratteggiata rappresenta una linea della griglia:

La griglia è composta da quattro linee orizzontali e tre linee verticali.
Figura 2. La griglia è composta da quattro linee orizzontali e tre linee verticali.

Traccia della griglia

Una traccia della griglia è lo spazio tra due linee della griglia. Una traccia di riga si trova tra due linee orizzontali, mentre una traccia di colonna si trova tra due linee verticali. Per definire le dimensioni di queste tracce, assegna loro una dimensione quando crei la griglia.

Una traccia della griglia per la prima riga.
Figura 3. Una traccia della griglia per la prima riga.

Cella della griglia

Una cella della griglia è l'intersezione di una riga e di una colonna.

Una cella della griglia che è un'intersezione della seconda riga e della seconda colonna.
Figura 4. Una cella della griglia che è un'intersezione della seconda riga e della seconda colonna.

Area griglia

Un'area della griglia è costituita da diverse celle della griglia. Puoi definire un'area della griglia facendo in modo che un elemento si estenda su più tracce.

Un'area della griglia composta da quattro celle.
Figura 5. Un'area della griglia composta da quattro celle.

Spazio tra le griglie

Un gap della griglia è lo spazio tra le tracce della griglia. Non puoi inserire un elemento UI in uno spazio vuoto, ma puoi estenderlo su di esso.

Uno spazio della griglia tra la prima e la seconda colonna.
Figura 6. Uno spazio della griglia tra la prima e la seconda colonna.