Lazy-Listen in einem Raster

Das Grid Composable erstellt strukturelle, zweidimensionale Bildschirmlayouts. Grid definiert eine responsive Layoutstruktur mit explizit definierten Tracks (Zeilen und Spalten) und Abständen als grundlegende Architektur Ihrer UI.

Da Grid ein struktureller Container und kein Lazy-Loading-Container ist, müssen Sie jedes darin platzierte Element explizit definieren, ohne Elemente beim Scrollen zu recyceln. Das Rendern großer oder dynamischer Datasets direkt in einer Grid kann daher zu Leistungsengpässen führen, da alle Elemente gleichzeitig zusammengestellt werden.

Wenn Sie große Datensammlungen in einem strukturierten Bildschirmlayout anzeigen möchten, binden Sie Lazy-Komponenten wie LazyColumn oder LazyRow in Ihre Grid-Zellen ein. Hinweis: Bei flexiblen Tracks (mit Spezifikationen wie 1.fr) werden die intrinsischen Größen der untergeordneten Elemente abgefragt. Da SubcomposeLayout keine intrinsischen Messdurchläufe unterstützt, führt das Platzieren einer Lazy List in einem flexiblen Track zu einem IllegalStateException-Absturz. Wenn Sie Lazy-Listen sicher in einem flexiblen Raster-Track platzieren möchten, müssen Sie die Größe GridTrackSize.MinMax (z. B. minmax(0.dp, 1.fr)) verwenden, um den intrinsischen Messdurchlauf zu umgehen.

Best Practices

• Verwenden Sie Lazy Lists anstelle von großen expliziten Schleifen: Wenn Sie große oder dynamische Datasets in einem strukturierten Grid anzeigen möchten, betten Sie Lazy-Komponenten (normalerweise LazyColumn oder LazyRow) in bestimmte Rasterzellen ein, anstatt große explizite Schleifen über Elemente zu erstellen. Grid recycelt keine Elemente und hat ein Limit von 1.000 Tracks.
• MinMax-Spurengröße für Lazy Lists verwenden: Da LazyColumn und LazyRow keine intrinsischen Messdurchläufe unterstützen (siehe SubcomposeLayout), verwenden Sie GridTrackSize.MinMax für flexible Spuren, die Lazy-Komponenten hosten, um intrinsische Messungen sicher zu umgehen.

Zutaten

• Grid: Ein zusammensetzbares Layout, das Elemente in einer zweidimensionalen Rasterstruktur platziert, die mit expliziten Zeilen- und Spaltenpfaden konfiguriert wird.
• LazyColumn: Vertikal scrollende Liste, die nur die Elemente zusammensetzt und wiederverwendet, die derzeit auf dem Bildschirm sichtbar sind.
• GridTrackSize.MinMax: Track-Größenattribut, das flexible Grenzen (min und max) definiert, um Lazy-Komponenten sicher zu hosten, ohne dass es zu Abstürzen bei der Laufzeitmessung kommt.
• gridItem: Compose-Modifier-Erweiterung, die ein untergeordnetes UI-Element einer bestimmten Zelle oder einem benannten Bereich innerhalb eines Grid zuweist.

Schritte

Strukturiere dein Bildschirmlayout, indem du semantische Bereichs-IDs definierst, Rasterspuren mit der Größe minmax für die Kompatibilität mit Lazy Lists konfigurierst und LazyColumn in den Rasterinhaltsbereich einbettest.

1. Raster-Tracks und benannte Bereiche konfigurieren

Erstelle eine enum-Klasse, um die verschiedenen Bereiche deines Bildschirmlayouts darzustellen, und definiere einen GridConfigurationScope-Lambda für deine Layout-Tracks und benannten Bereiche. Verwenden Sie GridTrackSize.MaxContent für die Kopf- und Fußzeilen, damit sie den Abmessungen des Inhalts entsprechen, und minmax(0.dp, 1.fr) für den Inhalts-Track, der die Lazy List hostet, um flexiblen Platz zuzuweisen, ohne nicht unterstützte intrinsische Messungen abzufragen:

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. Statische Komponenten im Raster platzieren

Übergeben Sie in Ihrer zusammensetzbaren Funktion lazyConfig an den Grid-Container. Platzieren Sie im Lambda-Ausdruck content statische Komponenten (Header und Footer) und positionieren Sie sie mit Modifier.gridItem() und den entsprechenden Bereichskennungen.

3. LazyColumn in den Inhaltsbereich einbetten

Betten Sie in der Inhaltszelle LazyColumn mit Modifier.gridItem(ScreenArea.Content) ein. Da der Content-Track in Schritt 1 mit minmax(0.dp, 1.fr) konfiguriert wurde, kann LazyColumn Elemente beim Scrollen sicher messen und wiederverwenden, ohne nicht unterstützte intrinsische Dimensionen abzufragen:

@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

Ergebnisse

Ihr Bildschirmlayout verwendet jetzt die Grid API, um die gesamte zweidimensionale Seitenstruktur zu definieren, und bettet ein LazyColumn in einen flexiblen Track mit minmax-Größe ein, um Listenelemente effizient wiederzuverwenden und Laufzeitausnahmen zu vermeiden.

Zusätzliche Ressourcen

• Raster in Jetpack Compose (Englisch)
• Containereigenschaften festlegen
• Lazy-Listen und Lazy-Raster