Grid in SwiftUI 4

Neuerungen der WWDC 2022 – Teil 4

Mit Grid steht ein neues View-Element in SwiftUI zur Verfügung, das es erlaubt, beliebige Views in fixen Reihen und Spalten anzuordnen.

Grid ist eine Container-View. Die ihr zugefügten Views werden als Reihen dargestellt. Soll eine Reihe über mehrere Spalten verfügen, nutzt man eine GridRow-Instanz. Auch hierbei handelt es sich um einen Container, der für jede Spalte innerhalb einer Reihe eine eigene View entgegennimmt.

Ein simples Beispiel zum Einsatz eines Grids zeigt das nachfolgende Listing. Dieses Grid besteht aus drei Reihen mit jeweils zwei Spalten.

struct ContentView: View {
    var body: some View {
        Grid {
            GridRow {
                Text("First name")
                    .bold()
                Text("Last name")
                    .bold()
            }
            GridRow {
                Text("Stephen")
                Text("King")
            }
            GridRow {
                Text("Joe")
                Text("Hill")
            }
        }
    }
}

Innerhalb eines Grids lassen sich neben GridRow– auch beliebige andere Views platzieren. Solche Views erstrecken sich dann über die gesamte Breite des Grids und werden nicht in Spalten unterteilt. Im nachfolgenden Listing kommt so beispielsweise eine spaltenübergreifende Trennlinie zwischen den letzten beiden Reihen zum Einsatz.

struct ContentView: View {
    var body: some View {
        Grid {
            GridRow {
                Text("First name")
                    .bold()
                Text("Last name")
                    .bold()
            }
            GridRow {
                Text("Stephen")
                Text("King")
            }
            Divider()
            GridRow {
                Text("Joe")
                Text("Hill")
            }
        }
    }
}

Ein Grid kann indes auch problemlos mit unterschiedlicher Spaltenzahl innerhalb der verschiedenen Reihen umgehen. Die Gesamtbreite des Grids orientiert sich dann an der Reihe mit den meisten Spalten. Bei den anderen Reihen werden die leeren Spalten schlicht nicht mit Inhalt gefüllt. Ein sehr gutes Beispiel hierzu aus Apples eigener Dokumentation zeigt das folgende Listing:

struct ContentView: View {
    var body: some View {
        Grid {
            GridRow {
                Text("Row 1")
                ForEach(0..<2) { _ in Color.red }
            }
            GridRow {
                Text("Row 2")
                ForEach(0..<5) { _ in Color.green }
            }
            GridRow {
                Text("Row 3")
                ForEach(0..<4) { _ in Color.blue }
            }
        }
    }
}

Fazit

Die neue Grid-View ist eine gelungene Ergänzung für das SwiftUI-Framework. Im Gegensatz zu den bereits verfügbaren Lazy-Grid-Varianten zeichnet eine Grid-View umgehend ihre gesamten Inhalte. Das ermöglicht es Grid, die vollständige Höhe und Breite und die genaue Anzahl aller Reihen und Spalten zu kennen. Das ist bei den Lazy-Varianten nicht der Fall, da diese ihre Inhalte dynamisch laden, sobald sie anzuzeigen sind.

Für sehr umfangreiche Grids mit vielen Views machen daher die Lazy-Varianten noch immer Sinn, um die Performance nicht zu sehr in Mitleidenschaft zu ziehen. Alternativ lassen sich einfache Grids nun aber dank der neuen Grid-View deutlich simpler und komfortabler mit SwiftUI realisieren.

Euer Thomas