Tabellenlayout im Raster

Symbol für Bewertung mit vier Sternen

In diesem Rezept wird gezeigt, wie die Grid API die Lesbarkeit von Code im Vergleich zu herkömmlichen verschachtelten Strukturen verbessert. Durch die Konfiguration von automatisch dimensionierten Tracks können Sie ein Raster erstellen, das die Zellenbreite und ‑höhe dynamisch an die intrinsische Größe Ihrer Text-Composables anpasst.

In diesem Rezept erstellen Sie eine Tabelle mit der Grid API.

Tabelle 1. Funktionsvergleich der FlexBox und Grid APIs
Layout Lazy Loading Soft Wrap Dynamische Layoutaktualisierung
FlexBox 1 T. Nein Ja Ja
Grid 2D Nein Nein Ja

Best Practices

Verwenden Sie das Grid-Composable, um die Lesbarkeit und Wartbarkeit von Tabellen zu verbessern. Mit Grid haben Sie die genaue Kontrolle über die Spaltendimensionen und die Ausrichtung in allen Zeilen, ohne die Breiten manuell synchronisieren zu müssen.

Zutaten

  • Grid: Ein Composable-Layout, mit dem Elemente in einem zweidimensionalen Raster platziert werden. Die Layoutkonfiguration wird im Lambda-Parameter config angegeben, während UI-Inhaltselemente im Lambda-Parameter content deklariert werden.
  • GridTrackSize.Auto: Gibt die automatische Track-Dimensionierung in der Rasterkonfiguration basierend auf der intrinsischen Größe des Inhalts an, z. B. column(GridTrackSize.Auto) und row(GridTrackSize.Auto).
  • gap(): Konfiguriert den Zeilen- und Spaltenabstand in GridConfigurationScope, z. B. gap(row = 8.dp, column = 16.dp).

Schritte

Erstellen Sie eine mehrspaltige Vergleichstabelle mit einem einzelnen Grid-Layout mit automatischer Spaltenausrichtung und Track-Dimensionierung für alle Elemente.

1. Rasterzeilen und ‑spalten zählen, um die Track-Größen zu bestimmen

Zählen Sie zuerst die Spalten und Zeilen, um die Größe der Tracks zu bestimmen:

  • Spalten: Die Anzahl der Attribute, die Sie vergleichen, plus eine Spalte für den Artikelnamen.
  • Zeilen: Die Anzahl der Elemente, die Sie vergleichen, plus eine Kopfzeile.

Für dieses Rezept, in dem zwei Komponenten (FlexBox und Grid) anhand von vier Attributen verglichen werden, benötigen Sie fünf Spalten und drei Zeilen.

2. Vergleichstabelle mit Grid implementieren

Erstellen Sie ein TableInGrid-Composable, das Grid verwendet, um die Tabellenelemente zu layouten. Rufen Sie die Funktionen column und row im Lambda config auf, um die Track-Größen zu definieren, und legen Sie den Zellenabstand mit gap() fest. Da Text eine intrinsische Größe hat, werden Spalten und Zeilen mit GridTrackSize.Auto automatisch an den Inhalt angepasst.

Platzieren Sie die Tabellenüberschriften und ‑daten im Lambda content. Grid verarbeitet automatisch die Platzierung und Ausrichtung aller Zellen:

@Composable
fun TableInGrid(
    modifier: Modifier = Modifier,
) {
    Grid(
        config = {
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            gap(row = 8.dp, column = 16.dp)
        },
        modifier = modifier,
    ) {
        // Table Header
        Text(text = "", fontWeight = FontWeight.Bold)
        Text(text = "Layout", fontWeight = FontWeight.Bold)
        Text(text = "Lazy loading", fontWeight = FontWeight.Bold)
        Text(text = "Soft wrap", fontWeight = FontWeight.Bold)
        Text(text = "Dynamic layout update", fontWeight = FontWeight.Bold)

        // FlexBox Row
        Text(text = "FlexBox", fontWeight = FontWeight.Bold)
        Text(text = "1D")
        Text(text = "No")
        Text(text = "Yes")
        Text(text = "Yes")

        // Grid Row
        Text(text = "Grid", fontWeight = FontWeight.Bold)
        Text(text = "2D")
        Text(text = "No")
        Text(text = "No")
        Text(text = "Yes")
    }
}

Ergebnisse

Sie haben jetzt eine übersichtliche, zweidimensionale Vergleichstabelle mit automatischer Spaltenausrichtung und automatischem Zellenabstand erstellt.

Abbildung 1. Die Vergleichstabelle mit einem Grid.

Zusätzliche Ressourcen