Raster

Grid ist eine Jetpack Compose-API, mit der Sie ein zweidimensionales Layout flexibel implementieren können. Mit dieser API können Sie Elemente in mehrspaltigen oder mehrzeiligen Layouts anzeigen, die sich an die verfügbare Containergröße anpassen.

Flexibles und adaptives zweidimensionales Layout mit Grid
Abbildung 1. Ein flexibles und adaptives zweidimensionales Layout mit Grid.

Wie unterscheidet sich „Grid“ von ähnlichen Composables?

Compose bietet bereits ähnliche Komponenten wie LazyVerticalGrid. Diese Komponenten sind hauptsächlich für die Visualisierung großer, homogener Datasets vorgesehen, z. B. für die Anzeige eines Inhaltskatalogs in einer Videostreaming-App. Sie sind NICHT für das strukturelle Layout eines Bildschirms oder einer komplexen Komponente konzipiert.

Sie können auch ein zweidimensionales Layout implementieren, indem Sie mehrere Row- und Column-Composables kombinieren. Dieser Ansatz hat jedoch einige Nachteile, z. B. tiefe Hierarchien und Schwierigkeiten bei der Anpassung.

Die folgende Tabelle gibt einen Überblick darüber, welche Layouts für die einzelnen APIs geeignet sind:

Komponente Zweck
LazyVerticalGrid, LazyStaggeredGrid, LazyHorizontalGrid Visualisierung großer, homogener Datasets, für die Lazy Loading erforderlich ist.
Row, Column, FlexBox Eindimensionales Layout
Grid Zweidimensionales Layout

Terminologie

Machen Sie sich mit der folgenden Terminologie vertraut, um die Funktionsweise von Grid zu verstehen.

Rasterlinie

Ein Raster besteht aus horizontalen und vertikalen Linien. Wenn Ihr Raster drei Zeilen hat, hat es vier horizontale Linien, einschließlich der Linie nach der letzten Zeile. Im folgenden Bild steht jede gepunktete Linie für eine Rasterlinie:

Das Raster besteht aus vier horizontalen und drei vertikalen Linien.
Abbildung 2. Das Raster besteht aus vier horizontalen und drei vertikalen Linien.

Rasterspur

Ein Grid-Track ist der Bereich zwischen zwei Grid-Linien. Ein Zeilen-Track befindet sich zwischen zwei horizontalen Linien und ein Spalten-Track zwischen zwei vertikalen Linien. Um die Größe dieser Spuren zu definieren, weisen Sie ihnen beim Erstellen des Rasters eine Größe zu.

Ein Grid-Track für die erste Zeile.
Abbildung 3. Ein Grid-Track für die erste Zeile.

Rasterzelle

Eine Rasterzelle ist die Schnittstelle einer Zeilen- und Spalten-Track.

Eine Rasterzelle, die sich an der Schnittstelle zwischen der zweiten Zeile und der zweiten Spalte befindet.
Abbildung 4. Eine Rasterzelle, die sich an der Schnittstelle zwischen der zweiten Zeile und der zweiten Spalte befindet.

Rasterbereich

Ein Rasterbereich besteht aus mehreren Rasterzellen. Sie können einen Rasterbereich definieren, indem Sie ein Element über mehrere Spuren erstrecken.

Ein Rasterbereich, der aus vier Rasterzellen besteht.
Abbildung 5: Ein Rasterbereich, der aus vier Rasterzellen besteht.

Rasterabstand

Ein Rasterabstand ist der Zwischenraum zwischen Rasterspalten. Sie können kein UI-Element in eine Lücke einfügen, aber ein UI-Element kann sich über eine Lücke erstrecken.

Ein Spalt zwischen der ersten und der zweiten Spalte des Rasters.
Abbildung 6. Ein Spalt zwischen der ersten und der zweiten Spalte des Rasters.
Zurück
Verhalten von Elementen festlegen
Weiter
Los gehts