Layoutcontainer

Jetpack Compose bietet mehrere Layoutcontainer, mit denen Sie Ihre UI-Komponenten strukturieren und anordnen können. Grundlegende Layout-Kompositionen wie Row und Column sind für einfache Anordnungen geeignet. Viele Apps erfordern jedoch reaktionsschnellere und anpassungsfähigere Containerlösungen, da sich die Bildschirmgrößen ändern und die Nutzerdaten zunehmen.

Layoutcontainer umfassen Folgendes:

• Lazy Lists und Lazy Grids: Komponenten wie LazyColumn, LazyRow und LazyVerticalGrid, die große oder dynamisch dimensionierte Datasets effizient anzeigen, indem sie nur Elemente zusammensetzen und anordnen, die im Darstellungsbereich sichtbar sind.
• Pager: Container wie HorizontalPager und VerticalPager, mit denen Nutzer zwischen Inhaltsseiten wischen oder scrollen können.
• Flusslayouts: Responsive eindimensionale Container (FlowRow und FlowColumn), die überlaufende Elemente automatisch in die nächste Zeile oder Spalte umbrechen, wenn der Platz nicht ausreicht.
• Grid: Eine flexible, zweidimensionale Struktur, in der Elemente in mehrspaltigen oder mehrzeiligen Layouts angezeigt werden, die sich an die Containergröße anpassen.
• FlexBox: Ein von CSS Flexbox inspirierter, adaptiver Container, der eine detaillierte Steuerung darüber ermöglicht, wie Elemente umbrochen, vergrößert, verkleinert und entlang der Haupt- und Querachse ausgerichtet werden, um den verfügbaren Platz zu füllen.

Richtigen Layoutcontainer auswählen

Wenn Sie Layouts in Compose erstellen, hängt die Wahl zwischen einfachen und komplexeren Layoutcontainern von Ihrem Design ab, davon, ob Elemente bei Platzmangel umgebrochen werden müssen, und davon, wie die Größe von Elementen dynamisch angepasst wird.

In der folgenden Tabelle sind die Funktionen der einzelnen 1D-Layoutcontainer von Compose zusammengefasst:

Container	Elemente werden in neue Zeilen umgebrochen	Vergrößern pro Element	Verkleinerung pro Element	Anfangsgröße pro Element	Elemente werden vergrößert, um den verfügbaren Platz in mehreren Zeilen auszufüllen	Elemente neu anordnen	Lazy Loading	Optimal für:
Zeile / Spalte	❌	✅ (über weight) nur einzeilig	❌	❌	❌	❌	❌	Einheitliche Zeilen mit einer kleinen, festen Anzahl von Elementen. Die Elemente passen in die verfügbaren Grenzen und müssen nicht auf mehrere Zeilen umgebrochen werden.
FlowRow / FlowColumn	✅	Eingeschränkt	❌	❌	Teilweise	❌	❌	Ersetzt durch FlexBox.
LazyRow / LazyColumn	❌	❌	❌	❌	❌	❌	✅	Lange oder unendliche Listen von Elementen, bei denen zur Leistungsoptimierung nur die sichtbaren Elemente gerendert werden müssen. Dynamische oder große Datasets, die in eine Richtung scrollen.
FlexBox	✅	✅	✅	✅	✅	✅	❌	Layouts, die adaptive Funktionen erfordern, z. B. die Angabe der Anfangsgröße, dynamisches Vergrößern/Verkleinern von Elementen (grow/shrink), visuelle Neuanordnung (order) oder Ausrichtung von Elementen auf der Querachse (alignSelf). Elemente unterschiedlicher Größe anordnen.

In der folgenden Tabelle sind die Funktionen für Grid und andere ähnliche Composables zusammengefasst:

Container	Strikte 2D-Ausrichtung	Elementübergreifend (Spalten)	Elementübergreifend (Zeilen)	Lazy Loading	Optimal für:
Raster	✅	✅ (über GridArea)	✅	❌	Strukturelle zweidimensionale Layouts, bei denen alle Elemente auf dem Bildschirm angezeigt werden und explizit horizontal und vertikal ausgerichtet werden müssen. Layouts werden adaptiv an verschiedene Bildschirmgrößen angepasst.
LazyVerticalGrid	✅	✅ (über span)	❌	✅	Vertikal scrollbare Feeds und große Kataloge, die Spalten erfordern.
LazyStaggeredGrid	❌ (nur 1D)	Teilweise (nur vollständiger Zeitraum)	❌	✅	Scrollbare Feeds mit Elementen unterschiedlicher Höhe.
LazyHorizontalGrid	✅	❌	✅	✅	Karussells mit horizontalem Scrollen oder mehrzeilige paginierte Daten.
Zeilen und Spalten kombinieren	❌	❌	❌	❌	Einfache Komponentenanordnung, z. B. Platzieren einer Textbeschriftung neben einem Symbol.