Raster

Hinweis: Grid ist eine experimentelle API, die sich ändern kann. Melden Sie alle Probleme in der Problemverfolgung.

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.

Abbildung 1 Ein flexibles und adaptives zweidimensionales Layout mit Grid.

Wie unterscheidet sich „Grid“ von ähnlichen zusammensetzbaren Funktionen?

Compose bietet bereits ähnliche Komponenten wie LazyVerticalGrid. Diese Komponenten dienen hauptsächlich zur Visualisierung großer, homogener Datensätze, z. B. zum Anzeigen eines Inhaltskatalogs in einer Video-Streaming-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 zusammensetzbare Funktionen vom Typ Row und Column 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 Datensätze, für die Lazy Loading erforderlich ist.
Row, Column, FlexBox	Eindimensionales Layout
Grid	Zweidimensionales Layout

Hinweis: Grid unterstützt kein Lazy Loading.

Terminologie

Machen Sie sich mit der folgenden Terminologie vertraut, um zu verstehen, wie Grid funktioniert.

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. In der folgenden Abbildung stellt jede gepunktete Linie eine Rasterlinie dar:

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

Rasterspur

Eine Rasterspur ist der Abstand zwischen zwei Rasterlinien. Eine Zeilenspur befindet sich zwischen zwei horizontalen Linien und eine Spaltenspur zwischen zwei vertikalen Linien. Um die Größe dieser Spuren zu definieren, weisen Sie ihnen beim Erstellen des Rasters eine Größe zu.

Abbildung 3. Eine Rasterspur für die erste Zeile.

Rasterzelle

Eine Rasterzelle ist der Schnittpunkt einer Zeilen- und einer Spaltenspur.

Abbildung 4. Eine Rasterzelle, die der Schnittpunkt der zweiten Zeile und der zweiten Spalte ist.

Rasterbereich

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

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

Rasterabstand

Ein Rasterabstand ist der Abstand zwischen den Rasterspuren. Sie können kein UI-Element in einen Abstand platzieren, aber Sie können ein UI-Element darüber erstrecken.

Abbildung 6. Ein Rasterabstand zwischen der ersten und der zweiten Spalte.