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.
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 |
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:
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.
Rasterzelle
Eine Rasterzelle ist der Schnittpunkt einer Zeilen- und einer Spaltenspur.
Rasterbereich
Ein Rasterbereich besteht aus mehreren Rasterzellen. Sie können einen Rasterbereich definieren, indem Sie ein Element über mehrere Spuren erstrecken.
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.
