Grids

Das Problem: Mehr als eine Spalte

Listen zeigen Inhalte untereinander, eine Zeile pro Eintrag. Für viele Inhalte ist ein Raster aber viel besser geeignet:

• Fotos in einer Galerie
• App-Symbole auf dem Home-Bildschirm
• Produkte in einem Shop
• Kategorien als Kacheln, wie in der Rezept-App aus Projekt D

Mit HStack und VStack (Lektion 2.7) kannst du ein festes Raster von Hand bauen. Aber wie viele Spalten passen auf ein kleines iPhone, wie viele auf ein großes, wie viele im Querformat? Und was ist mit 200 Fotos? Dafür gibt es Grids.

LazyVGrid: Ein scrollbares Raster

struct ColorGrid: View {
    let colors: [Color] = [.red, .orange, .yellow, .green, .mint, .teal, .cyan, .blue, .indigo, .purple, .pink, .brown]

    let columns = [
        GridItem(.flexible()),
        GridItem(.flexible()),
        GridItem(.flexible())
    ]

    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, spacing: 12) {
                ForEach(colors, id: \.self) { color in
                    RoundedRectangle(cornerRadius: 12)
                        .fill(color)
                        .frame(height: 100)
                }
            }
            .padding()
        }
    }
}

So funktioniert es:

• columns beschreibt die Spalten: ein Array aus **GridItem**s. Drei Einträge ergeben drei Spalten.
• LazyVGrid verteilt die Inhalte von links nach rechts und dann Reihe für Reihe nach unten.
• spacing ist der Abstand zwischen den Reihen. Den Abstand zwischen Spalten bestimmen die GridItems.
• Das Grid steckt in einer ScrollView. Anders als List scrollt ein Grid nicht von selbst.

Warum „Lazy“?

Lazy heißt „faul“: Das Grid erzeugt nur die Views, die gerade sichtbar sind oder gleich sichtbar werden. Bei 1.000 Fotos werden nicht 1.000 Views auf einmal gebaut, sondern nur die paar Dutzend auf dem Bildschirm. Beim Scrollen kommen weitere dazu. Das hält die App schnell und sparsam, genau wie bei List (Lektion 2.15).

Drei Arten von Spalten

Das Interessante an Grids sind die GridItems. Es gibt drei Arten:

Fest: .fixed

GridItem(.fixed(100))

Die Spalte ist genau 100 Punkte breit, egal wie viel Platz es gibt.

Flexibel: .flexible

GridItem(.flexible())
GridItem(.flexible(minimum: 80, maximum: 200))

Die Spalte teilt sich den verfügbaren Platz mit anderen flexiblen Spalten. Optional mit Mindest- und Höchstbreite. Drei flexible Spalten sind also immer genau drei, nur unterschiedlich breit je nach Bildschirm.

Adaptiv: .adaptive

let columns = [GridItem(.adaptive(minimum: 100))]

Das ist der Clou: Ein einziges adaptives GridItem erzeugt so viele Spalten, wie hineinpassen, jede mindestens 100 Punkte breit. Auf einem kleinen iPhone sind es vielleicht drei, auf einem großen vier, im Querformat sieben, auf dem iPad zehn.

LazyVGrid(columns: [GridItem(.adaptive(minimum: 100), spacing: 12)], spacing: 12) {
    ForEach(colors, id: \.self) { color in
        RoundedRectangle(cornerRadius: 12)
            .fill(color)
            .frame(height: 100)
    }
}

Dreh den Simulator ins Querformat (⌘ →), und das Raster ordnet sich automatisch neu.

Quadratische Kacheln

Häufig sollen Kacheln quadratisch sein, so hoch wie breit. Weil die Breite bei flexiblen Spalten vom Bildschirm abhängt, kannst du keine feste Höhe angeben. Hier hilft .aspectRatio:

Color.blue
    .aspectRatio(1, contentMode: .fit)
    .clipShape(.rect(cornerRadius: 12))

.aspectRatio(1, ...) heißt: Breite zu Höhe ist 1 zu 1. Die Kachel nimmt die Spaltenbreite und wird genauso hoch.

Für Fotos funktioniert das so:

Color.clear
    .aspectRatio(1, contentMode: .fit)
    .overlay {
        AsyncImage(url: photo.url) { image in
            image.resizable().scaledToFill()
        } placeholder: {
            Color(.secondarySystemBackground)
        }
    }
    .clipShape(.rect(cornerRadius: 8))

Ein durchsichtiges, quadratisches Color.clear gibt die Form vor, und das Bild liegt mit scaledToFill darüber. So hat jede Kachel garantiert dieselbe Größe, egal welches Seitenverhältnis das Foto hat.

Abschnitte mit Überschriften

Wie Listen können Grids Abschnitte haben:

LazyVGrid(columns: columns, pinnedViews: .sectionHeaders) {
    Section {
        ForEach(fruits, id: \.self) { Text($0) }
    } header: {
        Text("Obst")
            .font(.headline)
            .frame(maxWidth: .infinity, alignment: .leading)
            .padding(.vertical, 8)
            .background(.background)
    }
}

Mit pinnedViews: .sectionHeaders bleibt die Überschrift beim Scrollen oben „kleben“, bis der nächste Abschnitt sie verdrängt, wie in der Kontakte-App.

LazyHGrid: Waagrecht scrollen

Das Gegenstück scrollt seitwärts. Statt Spalten beschreibst du Reihen:

ScrollView(.horizontal) {
    LazyHGrid(rows: [GridItem(.fixed(80)), GridItem(.fixed(80))], spacing: 12) {
        ForEach(1...20, id: \.self) { number in
            Text("\(number)")
                .frame(width: 80, height: 80)
                .background(.orange.opacity(0.3))
                .clipShape(.rect(cornerRadius: 8))
        }
    }
    .padding()
}

Zwei Reihen à 80 Punkte, und die Elemente werden spaltenweise von oben nach unten und dann nach rechts verteilt. Typisch für Karussells wie „Zuletzt gehört“ in Musik-Apps.

Grid: Tabellen mit ausgerichteten Spalten

LazyVGrid ist für viele gleichartige Elemente. Für tabellenartige Layouts, in denen Spalten über mehrere Zeilen hinweg sauber ausgerichtet sein sollen, gibt es Grid:

Grid(alignment: .leading, horizontalSpacing: 16, verticalSpacing: 8) {
    GridRow {
        Text("Produkt").bold()
        Text("Menge").bold()
        Text("Preis").bold()
    }
    Divider()
    GridRow {
        Text("Kaffee")
        Text("2")
        Text("7,00 €")
    }
    GridRow {
        Text("Croissant mit Butter")
        Text("1")
        Text("2,80 €")
    }
}
.padding()

• Jede GridRow ist eine Zeile.
• Die Spalten passen sich automatisch dem breitesten Inhalt an. Genau das ist mit verschachtelten HStacks fast unmöglich.
• Ein Divider zwischen den Zeilen geht über die ganze Breite.

Einzelne Zellen kannst du anders ausrichten oder über mehrere Spalten ziehen:

GridRow {
    Text("Summe")
        .gridCellColumns(2)
    Text("9,80 €")
        .bold()
        .gridColumnAlignment(.trailing)
}

• .gridCellColumns(2) lässt eine Zelle über zwei Spalten gehen.
• .gridColumnAlignment(.trailing) richtet die ganze Spalte rechtsbündig aus, gut für Beträge.

Typische Fehler

Grid scrollt nicht

Ein LazyVGrid scrollt nicht von selbst. Pack es in eine ScrollView.

Kacheln haben unterschiedliche Höhen

In jeder Reihe richtet sich die Höhe nach dem höchsten Element. Unterschiedlich lange Texte oder Bilder mit verschiedenen Seitenverhältnissen ergeben unruhige Reihen. Gib den Kacheln eine feste Höhe oder ein festes Seitenverhältnis.

.adaptive mit mehreren Einträgen

[GridItem(.adaptive(minimum: 100)), GridItem(.adaptive(minimum: 100))]

Das ergibt zwei Bereiche, die sich jeweils mit Spalten füllen, und meist ein seltsames Ergebnis. Für ein gleichmäßiges, anpassungsfähiges Raster reicht ein adaptives GridItem.

Alles in Grid bei vielen Daten

Grid ist nicht lazy. Mit Tausenden Zeilen wird es langsam. Nimm dafür LazyVGrid oder List.

FAQ

Übungen

struct EmojiGrid: View {
    let emojis = Array("🍎🍐🍊🍋🍌🍉🍇🍓🫐🍈🍒🍑🥭🍍🥥🥝🍅🍆🥑🥦🥬🥒🌶️🫑🌽🥕🧄🧅🥔🍠").map(String.init)

    var body: some View {
        ScrollView {
            LazyVGrid(columns: [GridItem(.adaptive(minimum: 60), spacing: 8)], spacing: 8) {
                ForEach(emojis, id: \.self) { emoji in
                    Text(emoji)
                        .font(.largeTitle)
                        .frame(maxWidth: .infinity)
                        .aspectRatio(1, contentMode: .fit)
                        .background(Color(.secondarySystemBackground))
                        .clipShape(.rect(cornerRadius: 12))
                }
            }
            .padding()
        }
    }
}

Zusammenfassung

• LazyVGrid ordnet viele Elemente in Spalten an und erzeugt nur die sichtbaren. Es braucht eine ScrollView.
• Spalten mit GridItem: .fixed, .flexible oder .adaptive. Ein einziges adaptives Item passt sich jeder Breite an.
• .aspectRatio(1, contentMode: .fit) macht Kacheln quadratisch.
• pinnedViews: .sectionHeaders lässt Überschriften beim Scrollen kleben.
• LazyHGrid scrollt waagrecht und wird über Reihen beschrieben.
• Grid mit GridRow für Tabellen mit exakt ausgerichteten Spalten.

Spickzettel

ScrollView {
    LazyVGrid(columns: [GridItem(.adaptive(minimum: 100), spacing: 12)], spacing: 12) {
        ForEach(items) { item in
            Tile(item: item)
                .aspectRatio(1, contentMode: .fit)
        }
    }
    .padding()
}

let columns = [GridItem(.flexible()), GridItem(.flexible())]

Grid(alignment: .leading) {
    GridRow { Text("A"); Text("1") }
    GridRow { Text("Summe").gridCellColumns(2) }
}