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. Wenn Sie Tracks mit automatischer Größe konfigurieren, können Sie ein Raster erstellen, das sich dynamisch an die Zellenbreite und -höhe anpasst, basierend auf der intrinsischen Größe Ihrer Text-Kompositfunktionen.

In dieser Anleitung erstellen Sie eine Tabelle mit der Grid API.

Tabelle 1. Funktionsvergleich der FlexBox- und Grid-APIs
Layout Lazy Loading Weicher Zeilenumbruch Aktualisierung des dynamischen Layouts
FlexBox 1 T. Nein Ja Ja
Grid 2D Nein Nein Ja

Best Practices

Verwenden Sie das Compose-Element Grid, um die Lesbarkeit und Wartbarkeit von Tabellen zu verbessern. Mit Grid können Sie die Spaltenabmessungen und die Ausrichtung über alle Zeilen hinweg präzise steuern, ohne die Breite manuell synchronisieren zu müssen.

Zutaten

  • Grid: Ein zusammensetzbares Layout, bei 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 Größenanpassung von Spalten und Zeilen innerhalb 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 innerhalb von GridConfigurationScope, z. B. gap(row = 8.dp, column = 16.dp).

Schritte

Erstellen Sie eine mehrspaltige Vergleichstabelle mit einem einzigen Grid-Layout mit automatischer Spaltenausrichtung und Größenanpassung für alle Elemente.

1. Rasterzeilen und -spalten zählen, um die Trackgröß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, bei 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 eine zusammensetzbare TableInGrid-Funktion, die Grid verwendet, um die Tabellenelemente anzuordnen. Rufen Sie die Funktionen column und row im Lambda config auf, um die Spurgrößen zu definieren, und legen Sie den Zellenabstand mit gap() fest. Da Text eine intrinsische Größe hat, passt GridTrackSize.Auto die Größe von Spalten und Zeilen automatisch an den Inhalt an.

Platzieren Sie die Tabellenüberschriften und Daten im Lambda content. Grid übernimmt 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 Zellenabstand erstellt.

Abbildung 1. Die Vergleichstabelle mit einem Grid.

Zusätzliche Ressourcen