0Pricing
Swift Academy · Lektion

LazyVGrid und LazyHGrid

Erstellen Sie responsive Rasterlayouts mit festen, flexiblen und adaptiven GridItem-Spalten.

LazyVGrid und LazyHGrid ist eine kostenlose Swift Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Swift Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Swift Academy-Kurs umfasst insgesamt 4 Lektionen.

Willkommen

`LazyVGrid` und `LazyHGrid` bieten Grid-Layouts mit anpassbaren Spalten- oder Zeilendefinitionen mithilfe von `GridItem`. Sie eignen sich ideal für Galerien, Kataloge und Kartenlayouts.

GridItem-Typen

• `.fixed(size)` – feste Pixelgröße • `.flexible(min:max:)` – füllt den verfügbaren Platz • `.adaptive(minimum:maximum:)` – so viele Spalten, wie hineinpassen

Einfaches LazyVGrid

```swift let columns = [GridItem(.adaptive(minimum: 100))] LazyVGrid(columns: columns, spacing: 16) { ForEach(items) { item in ItemCard(item: item) } } ```

Feste Spalten

```swift let cols = Array(repeating: GridItem(.fixed(120)), count: 3) LazyVGrid(columns: cols) { ForEach(0..<12) { i in Color.blue.frame(height:80) } } ```

Gemischte GridItem-Typen

```swift let cols = [GridItem(.flexible(minimum:80)), GridItem(.fixed(100))] ``` Kombinieren Sie die Typen für Layouts im Pinterest-Stil.

LazyHGrid

```swift let rows = [GridItem(.fixed(60)), GridItem(.fixed(60))] ScrollView(.horizontal) { LazyHGrid(rows: rows, spacing: 8) { ForEach(tags) { tag in TagView(tag: tag) } } } ```

Ausrichtung und Abstände

```swift LazyVGrid(columns: columns, alignment: .leading, spacing: 12) { ... } ```

Abschnittsüberschriften in einem Grid

```swift LazyVGrid(columns: columns, pinnedViews: .sectionHeaders) { Section(header: Text("Section 1").font(.headline)) { ForEach(items1) { ItemView($0) } } } ```

Entscheidung zwischen Adaptive und Fixed

• `.adaptive` — ideal für Fotogrids und dynamische Inhalte • `.fixed` — wenn eine genaue Kontrolle erforderlich ist • `.flexible` — füllt den verfügbaren Platz gleichmäßig aus, wie eine CSS-Flexbox-Spalte

Leistung durch verzögertes Laden

Das Präfix `Lazy` bedeutet, dass nur sichtbare Zellen gerendert werden — entscheidend bei langen Listen. Ohne `Lazy` werden alle Elemente sofort erstellt.

Kurzer Test

Welcher `GridItem`-Typ erstellt so viele Spalten, wie mit einer Mindestbreite hineinpassen?

Zusammenfassung

Die wichtigsten Punkte: • `LazyVGrid(columns:)` / `LazyHGrid(rows:)` für Grid-Layouts • `GridItem(.fixed)`, `.flexible()`, `.adaptive(minimum:)` • `pinnedViews: .sectionHeaders` für angeheftete Überschriften • `Lazy` = nur sichtbare Zellen werden gerendert • `.adaptive` ist die einfachste Option für responsive Grids Als Nächstes: Spacer, padding und frame.

Häufig gestellte Fragen

Ist die Lektion „LazyVGrid und LazyHGrid“ kostenlos?

Ja — der vollständige Text von „LazyVGrid und LazyHGrid“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Swift Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Swift Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „LazyVGrid und LazyHGrid“?

Erstellen Sie responsive Rasterlayouts mit festen, flexiblen und adaptiven GridItem-Spalten. Du übst Swift Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Swift Academy zu starten?

Keine Vorkenntnisse erforderlich. Swift Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „LazyVGrid und LazyHGrid“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Swift Academy-Lektion Code schreiben und ausführen?

Ja. Jede Swift Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Grundlagen von VStack, HStack und ZStack
  2. LazyVGrid und LazyHGrid
  3. Spacer-, Padding- und Frame-Modifier
  4. GeometryReader für adaptive Layouts
← Zurück zu Swift Academy