Contenitori del layout

Jetpack Compose fornisce diversi container di layout per aiutarti a strutturare e disporre i componenti della UI. Sebbene i componibili di layout fondamentali come Row e Column gestiscano disposizioni semplici, molte app richiedono soluzioni di container più adattive e reattive man mano che le dimensioni dello schermo cambiano e i dati utente aumentano.

I contenitori di layout includono:

• Elenchi e griglie lazy: componenti come LazyColumn, LazyRow e LazyVerticalGrid che mostrano in modo efficiente set di dati di grandi dimensioni o con dimensioni dinamiche componendo e disponendo solo gli elementi attualmente visibili nell'area visibile.
• Pager: container come HorizontalPager e VerticalPager che consentono agli utenti di scorrere tra le pagine di contenuti.
• Layout di flusso: container monodimensionali adattabili (FlowRow e FlowColumn) che spostano automaticamente gli elementi in eccesso nella riga o colonna successiva quando lo spazio si esaurisce.
• Griglia: una struttura flessibile e bidimensionale che mostra gli elementi in layout a più colonne o più righe che si adattano alle dimensioni del contenitore.
• FlexBox: un contenitore adattivo ispirato a CSS Flexbox che offre un controllo granulare su come gli elementi vengono raggruppati, ingranditi, ridotti e allineati lungo gli assi principale e trasversale per riempire lo spazio disponibile.

Scegli il contenitore di layout corretto

Quando crei layout in Compose, la scelta tra container di layout di base e più avanzati dipende dal design, dal fatto che gli elementi debbano andare a capo quando lo spazio è limitato e dal modo in cui gli elementi vengono ridimensionati dinamicamente.

La tabella seguente riassume le funzionalità di ciascuno dei container di layout Compose 1D:

Container	Va a capo con gli elementi	Per-item grow	Per-item shrink	Dimensioni iniziali per articolo	Gli elementi si espandono per riempire lo spazio disponibile su più righe	Riordinare gli elementi	Caricamento lento	Ideale per:
Riga / colonna	❌	✅ (tramite weight) solo una riga	❌	❌	❌	❌	❌	Righe uniformi con un numero ridotto e fisso di elementi. Gli elementi rientrano nei limiti disponibili e non devono essere distribuiti su più righe.
FlowRow / FlowColumn	✅	Limitato	❌	❌	Parziale	❌	❌	Sostituito da FlexBox.
LazyRow / LazyColumn	❌	❌	❌	❌	❌	❌	✅	Elenchi lunghi o infiniti di elementi in cui solo gli elementi visibili devono essere visualizzati per l'ottimizzazione delle prestazioni. Set di dati dinamici o di grandi dimensioni che scorrono in un'unica direzione.
FlexBox	✅	✅	✅	✅	✅	✅	❌	Layout che richiedono funzionalità adattive, come la specifica della dimensione iniziale, la crescita/riduzione dinamica degli elementi (grow/shrink), il riordinamento visivo (order) o l'allineamento degli elementi su più assi (alignSelf). Disposizione di elementi di dimensioni diverse.

La seguente tabella riassume le funzionalità di Grid e di altri componibili simili:

Container	Allineamento 2D esatto	Estensione degli elementi (colonne)	Estensione degli elementi (righe)	Caricamento lento	Ideale per:
Griglia	✅	✅ (tramite GridArea)	✅	❌	Layout strutturali bidimensionali in cui tutti gli elementi sono sullo schermo e richiedono un allineamento orizzontale e verticale esplicito. Ristrutturazione adattiva dei layout in base alle dimensioni dello schermo.
LazyVerticalGrid	✅	✅ (tramite span)	❌	✅	Feed a scorrimento verticale e cataloghi di grandi dimensioni che richiedono colonne.
LazyStaggeredGrid	❌ (solo 1D)	Parziale (solo intervallo completo)	❌	✅	Feed a scorrimento con elementi di altezza mista.
LazyHorizontalGrid	✅	❌	✅	✅	Caroselli a scorrimento orizzontale o dati impaginati su più righe.
Combinazione di righe e colonne	❌	❌	❌	❌	Assemblaggio di componenti semplici, come il posizionamento di un'etichetta di testo accanto a un'icona.