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 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.
In der folgenden Tabelle finden Sie eine Übersicht 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 den folgenden Begriffen vertraut, um die Funktionsweise von Grid zu verstehen.
Rasterlinie
Ein Raster besteht aus horizontalen und vertikalen Linien. Wenn Ihr Raster drei Zeilen hat, gibt es vier horizontale Linien, einschließlich der Linie nach der letzten Zeile. Im folgenden Bild stellt jede gepunktete Linie eine Rasterlinie dar:
Rasterspur
Ein Grid-Track ist der Abstand zwischen zwei Grid-Linien. Ein Zeilentrack befindet sich zwischen zwei horizontalen Linien und ein Spaltentrack zwischen zwei vertikalen Linien. Wenn Sie die Größe dieser Spuren definieren möchten, weisen Sie ihnen beim Erstellen des Rasters eine Größe zu.
Rasterzelle
Eine Rasterzelle ist der Schnittpunkt einer Zeilen- und einer Spalten-Track.
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 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.
