Creare una griglia scorrevole

Puoi gestire set di dati di grandi dimensioni e contenuti dinamici con le griglie lazy, migliorando le prestazioni dell'app. Con i composabili della griglia lazy, puoi visualizzare gli elementi in un contenuto scorrevole, su più colonne o righe.

Compatibilità delle versioni

Questa implementazione richiede che il valore minSDK del progetto sia impostato sul livello API 21 o superiore.

Dipendenze

Decidi l'orientamento della griglia

I composabili LazyHorizontalGrid e LazyVerticalGrid supportano la visualizzazione degli elementi in una griglia. Una griglia verticale lazy mostra i suoi elementi in un contenitore scorrevole verticalmente, su più colonne, mentre le griglie orizzontali lazy hanno lo stesso comportamento sull'asse orizzontale.

Creare una griglia scorrevole

Il seguente codice crea una griglia con scorrimento orizzontale con tre colonne:

@Composable
fun ScrollingGrid() {
    val itemsList = (0..15).toList()

    val itemModifier = Modifier
        .border(1.dp, Color.Blue)
        .width(80.dp)
        .wrapContentSize()

    LazyHorizontalGrid(
        rows = GridCells.Fixed(3),
        horizontalArrangement = Arrangement.spacedBy(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        items(itemsList) {
            Text("Item is $it", itemModifier)
        }

        item {
            Text("Single item", itemModifier)
        }
    }
}
LazyListSnippets.kt

Punti chiave del codice

  • Il composable LazyHorizontalGrid determina l'orientamento orizzontale della griglia.
    • Per creare una griglia verticale, utilizza LazyVerticalGrid.
  • La proprietà rows specifica come organizzare i contenuti della griglia.
    • Per una griglia verticale, utilizza la proprietà columns per specificare l'ordinamento.
  • items(itemsList) aggiunge itemsList a LazyHorizontalGrid. La funzione lambda visualizza un componibile Text per ogni elemento e imposta il testo sulla descrizione dell'elemento.
  • item() aggiunge un singolo elemento a LazyHorizontalGrid, mentre la funzione lambda rappresenta un singolo componibile Text in modo simile a items().
  • GridCells.Fixed definisce il numero di righe o colonne.

  • Per creare una griglia con il maggior numero possibile di righe, imposta il numero di righe utilizzando GridCells.Adaptive.

    Nel codice seguente, il valore 20.dp specifica che ogni colonna deve essere di almeno 20 dp e che tutte le colonne devono avere la stessa larghezza. Se lo schermo è largo 88 dp, ci sono 4 colonne da 22 dp ciascuna.

Risultati

Figura 1. Una griglia orizzontale scorrevole che utilizza LazyHorizontalGrid.

Raccolte che contengono questa guida

Questa guida fa parte di queste raccolte di guide rapide selezionate che coprono obiettivi di sviluppo Android più ampi:

Elenchi e griglie consentono alla tua app di mostrare le raccolte in un formato piacevole dal punto di vista visivo e facilmente fruibile dagli utenti.
Collezione di guide rapide
Scopri come le funzioni composable possono aiutarti a creare facilmente magnifici componenti dell'interfaccia utente basati sul sistema di progettazione Material Design.
Collezione di guide rapide
Questa serie di video introduce varie API Compose, mostrando rapidamente cosa è disponibile e come utilizzarle.
Collezione di guide rapide

Domande o feedback

Visita la nostra pagina delle domande frequenti e scopri le guide rapide o contattaci per farci sapere cosa ne pensi.
Vai alle domande frequenti Lascia un feedback