Elenchi pigri in una griglia

Il componente componibile Grid crea layout di schermo strutturali bidimensionali. Grid definisce una struttura di layout reattiva utilizzando tracce (righe e colonne) e spazi esplicitamente definiti come architettura di base della tua UI.

Poiché Grid è un contenitore strutturale anziché a caricamento differito, devi definire esplicitamente ogni elemento inserito al suo interno senza riciclare gli elementi durante lo scorrimento. Di conseguenza, il rendering di set di dati di grandi dimensioni o dinamici direttamente all'interno di un Grid può causare colli di bottiglia delle prestazioni, poiché tutti gli elementi vengono composti contemporaneamente.

Per visualizzare grandi raccolte di dati all'interno di un layout strutturato dello schermo, incorpora componenti lazy come LazyColumn o LazyRow nelle celle Grid. Tuttavia, tieni presente che le tracce flessibili (con specifiche come 1.fr) eseguono query sulle dimensioni intrinseche degli elementi secondari. Poiché SubcomposeLayout non supporta i passaggi di misurazione intrinseca, l'inserimento di un elenco pigro all'interno di una traccia flessibile causa un arresto anomalo di IllegalStateException. Per posizionare in modo sicuro le liste pigre all'interno di una traccia della griglia flessibile, devi utilizzare il dimensionamento GridTrackSize.MinMax (ad esempio minmax(0.dp, 1.fr)) per ignorare il passaggio di misurazione intrinseca.

Best practice

• Utilizza elenchi pigri anziché loop espliciti di grandi dimensioni: per visualizzare set di dati di grandi dimensioni o dinamici all'interno di un Grid strutturato, incorpora componenti pigri (in genere LazyColumn o LazyRow) all'interno di celle della griglia specifiche anziché creare loop espliciti di grandi dimensioni sugli elementi, poiché Grid non ricicla gli elementi e ha un limite di 1000 tracce.
• Utilizza il ridimensionamento delle tracce MinMax per le liste pigre: poiché LazyColumn e LazyRow non supportano i passaggi di misurazione intrinseca (vedi SubcomposeLayout), utilizza GridTrackSize.MinMax sulle tracce flessibili che ospitano componenti pigri per bypassare le misurazioni intrinseche in modo sicuro.

Ingredienti

• Grid: layout componibile che posiziona gli elementi in una struttura a griglia bidimensionale configurata utilizzando tracce di righe e colonne esplicite.
• LazyColumn: elenco a scorrimento verticale che compone e ricicla solo gli elementi attualmente visibili sullo schermo.
• GridTrackSize.MinMax: proprietà di dimensionamento della traccia che definisce limiti flessibili (min e max) per ospitare in modo sicuro componenti lazy senza attivare arresti anomali della misurazione in fase di runtime.
• gridItem: estensione Compose Modifier che assegna un elemento UI secondario a una cella specifica o a un'area denominata all'interno di un Grid.

Passaggi

Struttura il layout dello schermo definendo gli identificatori delle aree semantiche, configurando le tracce della griglia con il dimensionamento minmax per la compatibilità con le liste pigre e incorporando LazyColumn all'interno dell'area dei contenuti della griglia.

1. Configurare le tracce della griglia e le aree denominate

Crea una classe enum per rappresentare le diverse regioni del layout dello schermo e definisci una lambda GridConfigurationScope per le tracce del layout e le aree denominate. Utilizza GridTrackSize.MaxContent per le righe di intestazione e piè di pagina in modo che si adattino alle dimensioni dei contenuti e utilizza minmax(0.dp, 1.fr) per l'hosting della traccia dei contenuti dell'elenco pigro per allocare spazio flessibile senza eseguire query su misurazioni intrinseche non supportate:

enum class ScreenArea {
    Header,
    Content,
    Footer
}


val lazyConfig: GridConfigurationScope.() -> Unit = {
    column(minmax(0.dp, 1.fr))
    row(GridTrackSize.MaxContent)
    row(minmax(0.dp, 1.fr))
    row(GridTrackSize.MaxContent)

    area(ScreenArea.Header, row = 1, column = 1)
    area(ScreenArea.Content, row = 2, column = 1)
    area(ScreenArea.Footer, row = 3, column = 1)
    gap(8.dp)
}
GridByExamples.kt

2. Posizionare i componenti statici nella griglia

Nel composable, passa lazyConfig al contenitore Grid. All'interno della lambda content, posiziona i componenti statici (intestazione e piè di pagina) e posizionali utilizzando Modifier.gridItem() con i rispettivi identificatori di area.

3. Incorpora LazyColumn nell'area dei contenuti

Nella cella dei contenuti, incorpora LazyColumn utilizzando Modifier.gridItem(ScreenArea.Content). Poiché la traccia dei contenuti è stata configurata con minmax(0.dp, 1.fr) nel passaggio 1, LazyColumn può misurare e riciclare in modo sicuro gli elementi durante lo scorrimento senza eseguire query su dimensioni intrinseche non supportate:

@Composable
fun GridWithLazyColumn(
    modifier: Modifier = Modifier,
    items: List<String> = emptyList(),
) {
    Grid(
        modifier = modifier.fillMaxSize(),
        config = lazyConfig
    ) {
        Text("Header", Modifier.gridItem(ScreenArea.Header).padding(16.dp))
        Text("Footer", Modifier.gridItem(ScreenArea.Footer).padding(16.dp))

        // LazyColumn placed in the content area for large datasets
        LazyColumn(
            modifier = Modifier
                .gridItem(ScreenArea.Content)
                .fillMaxSize(),
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            items(items) { item ->
                Text(item, Modifier.padding(16.dp))
            }
        }
    }
}
GridByExamples.kt

Risultati

Il layout dello schermo ora utilizza l'API Grid per definire la struttura bidimensionale complessiva della pagina, incorporando un LazyColumn in una traccia flessibile con dimensioni minmax per riciclare in modo efficiente gli elementi dell'elenco ed evitare eccezioni di runtime.

Risorse aggiuntive

• Griglia in Jetpack Compose
• Impostare le proprietà del contenitore
• Elenchi e griglie pigri