Scrollbares Raster erstellen

Mit Lazy-Grids können Sie große Datensätze und dynamische Inhalte verwalten und so die App-Leistung verbessern. Mit Lazy-Grid-Kompositen können Sie Elemente in einem scrollbaren Container anzeigen, der sich über mehrere Spalten oder Zeilen erstreckt.

Versionskompatibilität

Für diese Implementierung muss das minSDK Ihres Projekts auf API-Level 21 oder höher festgelegt sein.

Abhängigkeiten

Rasterausrichtung festlegen

Die Composeables LazyHorizontalGrid und LazyVerticalGrid unterstützen die Anzeige von Elementen in einem Raster. In einem Lazy Vertical Grid werden die Elemente in einem vertikal scrollbaren Container angezeigt, der sich über mehrere Spalten erstreckt. Lazy Horizontal Grids funktionieren auf der horizontalen Achse genauso.

Scrollbares Raster erstellen

Mit dem folgenden Code wird ein horizontal scrollbares Raster mit drei Spalten erstellt:

@Composable
fun ScrollingGrid() {
    val itemsList = (0..15).toList()

    val itemModifier = Modifier
        .border(1.dp, Color.Blue)
        .width(80.dp)
        .wrapContentSize()

    LazyHorizontalGrid(
        rows = GridCells.Fixed(3),
        horizontalArrangement = Arrangement.spacedBy(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        items(itemsList) {
            Text("Item is $it", itemModifier)
        }

        item {
            Text("Single item", itemModifier)
        }
    }
}
LazyListSnippets.kt

Wichtige Punkte zum Code

  • Mit dem LazyHorizontalGrid-Element wird die horizontale Ausrichtung des Rasters festgelegt.
    • Wenn Sie ein vertikales Raster erstellen möchten, verwenden Sie stattdessen die Taste LazyVerticalGrid.
  • Mit der Eigenschaft rows wird festgelegt, wie die Rasterinhalte angeordnet werden.
    • Verwenden Sie für ein vertikales Raster die Property columns, um das Layout anzugeben.
  • items(itemsList) fügt itemsList zu LazyHorizontalGrid hinzu. Das Lambda-Objekt rendert für jedes Element ein Text-Komposit und legt den Text auf die Artikelbeschreibung fest.
  • Mit item() wird LazyHorizontalGrid ein einzelnes Element hinzugefügt, während das Lambda ein einzelnes Text rendert, das ähnlich wie items() zusammengesetzt werden kann.
  • GridCells.Fixed definiert die Anzahl der Zeilen oder Spalten.

  • Wenn Sie ein Raster mit möglichst vielen Zeilen erstellen möchten, legen Sie die Anzahl der Zeilen mit GridCells.Adaptive fest.

    Im folgenden Code gibt der Wert 20.dp an, dass jede Spalte mindestens 20 dp breit ist und alle Spalten dieselbe Breite haben. Wenn das Display 88 dp breit ist, gibt es 4 Spalten mit jeweils 22 dp.

Ergebnisse

Abbildung 1: Ein horizontales scrollbares Raster mit LazyHorizontalGrid

Sammlungen, die diesen Leitfaden enthalten

Dieser Leitfaden ist Teil der folgenden ausgewählten Sammlungen von Kurzanleitungen, die allgemeinere Ziele der Android-Entwicklung abdecken:

Mit Listen und Rastern können Sie Sammlungen in Ihrer App in einer visuell ansprechenden Form präsentieren, die für Nutzer leicht zu konsumieren ist.
Sammlung von Kurzanleitungen
Hier erfahren Sie, wie Sie mit kombinierbaren Funktionen ganz einfach ansprechende UI-Komponenten auf der Grundlage des Material Design-Designsystems erstellen können.
Sammlung von Kurzanleitungen
In dieser Videoreihe werden verschiedene Compose APIs vorgestellt. Sie erhalten einen schnellen Überblick über die verfügbaren APIs und ihre Verwendung.
Sammlung von Kurzanleitungen

Hast du Fragen oder Feedback?

Auf unserer Seite mit häufig gestellten Fragen finden Sie Kurzanleitungen. Sie können sich auch gern an uns wenden.
Zu den FAQs Feedback geben