SwiftUI Academy · Lektion

Adaptive Grids mit LazyVGrid

Ordnen Sie Karten in flexiblen Grid-Spalten an.

Adaptive Grids mit LazyVGrid ist eine kostenlose SwiftUI Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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 SwiftUI Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der SwiftUI Academy-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

Why a Grid?

Stacks give you rows or columns, but a LazyVGrid arranges items into neat rows and columns, like a photo album. 🖼️

Define the Columns

A LazyVGrid needs a columns array of GridItem values that describe how many tracks to lay out.

let columns = [GridItem(), GridItem()]
LazyVGrid(columns: columns) {
    ForEach(items) { Cell($0) }
}

Flexible Items

A GridItem(.flexible()) stretches to share space evenly, so two flexible items make two equal columns.

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

Fixed Width Tracks

Use GridItem(.fixed(80)) when you want a column to stay exactly 80 points wide no matter the screen.

let columns = [GridItem(.fixed(80))]

Truly Adaptive

The magic option is .adaptive(minimum:): it fits as many columns as will fit, adjusting to any screen size.

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

Always Inside a Scroll

Wrap your LazyVGrid in a ScrollView so the grid can grow past the screen and load cells lazily.

ScrollView {
    LazyVGrid(columns: columns) {
        ForEach(items) { Cell($0) }
    }
}

Spacing Between Cells

Tune the gaps with a spacing argument on the grid and on each GridItem for tidy, balanced cells.

LazyVGrid(columns: columns, spacing: 16) {
    ForEach(items) { Cell($0) }
}

Cells Are Just Views

Each item in the ForEach becomes a cell, so any view works: an image, a card, or a labeled button.

ForEach(photos) { photo in
    Image(photo.name)
        .resizable()
}

Lazy by Name

Like other lazy containers, LazyVGrid builds cells as they scroll in, so large galleries stay smooth.

Horizontal Cousin

Need columns of fixed rows scrolling sideways? LazyHGrid is the horizontal counterpart with the same GridItem API.

Responsive Layouts

One adaptive grid looks great on a phone and an iPad, since columns reflow automatically to fill the space. ✨

Quick Check

Think about which GridItem reacts to screen size.

Recap

You learned to build flexible, fixed, and adaptive grids with LazyVGrid inside a ScrollView for responsive layouts. 🎉

Häufig gestellte Fragen

Ist die Lektion „Adaptive Grids mit LazyVGrid“ kostenlos?

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

Was lerne ich in „Adaptive Grids mit LazyVGrid“?

Ordnen Sie Karten in flexiblen Grid-Spalten an. Du übst SwiftUI 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 SwiftUI Academy zu starten?

Keine Vorkenntnisse erforderlich. SwiftUI 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 3 von 4.

Wie lange dauert die Lektion „Adaptive Grids mit LazyVGrid“?

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 SwiftUI Academy-Lektion Code schreiben und ausführen?

Ja. Jede SwiftUI 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

← Zurück zu SwiftUI Academy