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 dienen hauptsächlich der Visualisierung großer, homogener Datensätze, z. B. der Anzeige eines Inhaltskatalogs in einer Video-Streaming-App. Sie sind NICHT für das strukturelle Layout eines Bildschirms oder einer komplexen Komponente gedacht.
Du kannst auch ein zweidimensionales Layout implementieren, indem du mehrere Row- und Column-Kompositionen kombinierst.
Dieser Ansatz hat jedoch einige Nachteile, z. B. tiefe Hierarchien und Schwierigkeiten bei der Anpassung.
Die folgende Tabelle bietet einen Überblick darüber, welche Layouts für die einzelnen APIs geeignet sind:
| Komponente | Zweck |
|---|---|
LazyVerticalGrid, LazyStaggeredGrid, LazyHorizontalGrid |
Visualisierung großer, homogener Datasets, die Lazy Loading erfordern. |
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
Ein Raster-Track ist der Bereich zwischen zwei Rasterlinien. Ein Zeilen-Track befindet sich zwischen zwei horizontalen Linien und ein Spalten-Track zwischen zwei vertikalen Linien. Um die Größe dieser Tracks 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 lassen.
Rasterabstand
Eine Rasterlücke ist der Abstand zwischen Rasterspuren. Sie können ein UI-Element nicht in einer Lücke platzieren, aber Sie können ein UI-Element darüber spannen.
