Lazy-Listen in einem Raster

Mit dem Grid-Composable werden strukturelle, zweidimensionale Bildschirm-Layouts erstellt. Mit Grid wird eine responsive Layoutstruktur mit explizit definierten Tracks (Zeilen und Spalten) und Lücken als grundlegende Architektur Ihrer Benutzeroberfläche definiert.

Da Grid ein struktureller und kein Lazy-Loading-Container ist, müssen Sie jedes darin platzierte Element explizit definieren, ohne Elemente beim Scrollen wiederzuverwenden. Wenn Sie große oder dynamische Datasets direkt in einem Grid rendern, kann dies zu Leistungsengpässen führen, da alle Elemente gleichzeitig zusammengesetzt werden.

Wenn Sie große Datensammlungen in einem strukturierten Bildschirm-Layout anzeigen möchten, betten Sie Lazy-Komponenten wie LazyColumn oder LazyRow in Ihre Grid-Zellen ein. Bei flexiblen Tracks (mit Spezifikationen wie 1.fr) werden jedoch die intrinsischen Größen von untergeordneten Elementen 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 Lists sicher in einem flexiblen Grid-Track platzieren möchten, müssen Sie die GridTrackSize.MinMax-Größenanpassung (z. B. minmax(0.dp, 1.fr)) verwenden, um den intrinsischen Messdurchlauf zu umgehen.

Best Practices

• Lazy Lists anstelle von großen expliziten Schleifen verwenden: Wenn Sie große oder dynamische Datasets in einem strukturierten Grid darstellen möchten, betten Sie Lazy-Komponenten (in der Regel LazyColumn oder LazyRow) in bestimmte Rasterzellen ein, anstatt große explizite Schleifen für Elemente zu erstellen, da Grid Elemente nicht wiederverwendet und ein Limit von 1.000 Tracks hat.
• MinMax-Track-Größenanpassung für Lazy Lists verwenden: Da LazyColumn und LazyRow keine intrinsischen Messdurchläufe unterstützen (siehe SubcomposeLayout), sollten Sie GridTrackSize.MinMax für flexible Tracks verwenden, auf denen Lazy-Komponenten gehostet werden, um intrinsische Messungen sicher zu umgehen.

Zutaten

• Grid: Zusammensetzbares Layout, in dem Elemente in einem zweidimensionalen Raster platziert werden, das mit expliziten Zeilen- und Spalten-Tracks konfiguriert wird.
• LazyColumn: Vertikal scrollende Liste, in der nur die Elemente zusammengestellt und wiederverwendet werden, die derzeit auf dem Bildschirm sichtbar sind.
• GridTrackSize.MinMax: Attribut für die Größenanpassung von Tracks, das flexible Grenzen (min und max) definiert, um Lazy-Komponenten sicher zu hosten, ohne Laufzeitmessungsabstürze auszulösen.
• gridItem: Compose-Erweiterung Modifier, mit der einem untergeordneten UI-Element eine bestimmte Zelle oder ein benannter Bereich in einem Grid zugewiesen wird.

Schritte

Strukturieren Sie Ihr Bildschirm-Layout, indem Sie semantische Bereichs-IDs definieren, Rasterspalten mit minmax-Größen für die Kompatibilität mit Lazy Lists konfigurieren und LazyColumn in den Rasterinhaltsbereich einbetten.

1. Rasterspalten und ‑zeilen sowie benannte Bereiche konfigurieren

Erstellen Sie eine enum-Klasse, um die einzelnen Bereiche Ihres Bildschirmlayouts darzustellen, und definieren Sie ein GridConfigurationScope-Lambda für Ihre Layout-Tracks und benannten Bereiche. Verwenden Sie GridTrackSize.MaxContent für die Kopf- und Fußzeilen, um die Abmessungen des Inhalts anzupassen, und minmax(0.dp, 1.fr) für den Content-Track, in dem die Lazy List gehostet wird, 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 Ihrem Composable lazyConfig an den Grid-Container. Platzieren Sie in der Lambda-Funktion content statische Komponenten (Header und Footer) und positionieren Sie sie mit Modifier.gridItem() und den entsprechenden Bereichs-IDs.

3. LazyColumn in den Inhaltsbereich einbetten

Betten Sie LazyColumn in die Inhaltszelle ein. Verwenden Sie dazu Modifier.gridItem(ScreenArea.Content). 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 zweidimensionale Seitenstruktur zu definieren. Dabei wird ein LazyColumn in einen flexiblen Track mit minmax-Größenanpassung eingebettet, um Listenelemente effizient wiederzuverwenden und Laufzeitfehler zu vermeiden.

Zusätzliche Ressourcen

• Raster in Jetpack Compose
• Containereigenschaften festlegen
• Lazy Lists und Lazy Grids