0Pricing
Swift Academy · Lektion

Grundlagen von VStack, HStack und ZStack

Stapeln Sie Views vertikal, horizontal und in der Tiefe mit Abständen und Ausrichtung.

Grundlagen von VStack, HStack und ZStack ist eine kostenlose Swift Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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

`VStack`, `HStack` und `ZStack` sind die drei grundlegenden Layout-Container in SwiftUI. Ihr Verständnis ist entscheidend für die Erstellung jeder Benutzeroberfläche.

VStack – vertikal

```swift VStack(alignment: .leading, spacing: 8) { Text("Title").font(.title) Text("Subtitle").foregroundColor(.secondary) Button("Action") {} } ```

HStack – horizontal

```swift HStack(spacing: 16) { Image(systemName: "star") Text("Favourite") Spacer() Text("4.9") } ```

ZStack – Tiefenachse

```swift ZStack(alignment: .bottomTrailing) { Image("background") Text("Overlay") .padding() .background(Color.black.opacity(0.5)) } ```

Ausrichtungsoptionen

VStack-Ausrichtung: `.leading`, `.center`, `.trailing` HStack-Ausrichtung: `.top`, `.center`, `.bottom`, `.firstTextBaseline` ZStack-Ausrichtung: jede `Alignment`, die eine horizontale und vertikale Ausrichtung kombiniert

Spacing-Parameter

```swift VStack(spacing: 0) { // no space between views Divider() Text("A") Divider() Text("B") } ```

Stacks verschachteln

```swift VStack { HStack { Image("icon"); Text("Name") } Text("Description") } ``` Stacks können beliebig tief verschachtelt werden, um jedes gewünschte Layout zu erreichen.

Spacer

```swift HStack { Text("Left") Spacer() // pushes views to edges Text("Right") } ```

Divider

```swift VStack { Text("Above") Divider() // horizontal line Text("Below") } ```

Performance: Group im Vergleich zu Stack

Bei mehr als 10 untergeordneten Views sollten Sie sie in `Group` einschließen oder zu `LazyVStack` wechseln, um Einschränkungen des View-Baums zu vermeiden: ```swift ScrollView { LazyVStack { ForEach(items) { Text($0.name) } } } ```

Kurzer Test

Welcher Stack ordnet Views entlang der Tiefenachse (von vorne nach hinten) an?

Zusammenfassung

Die wichtigsten Erkenntnisse: • `VStack` – vertikal; `HStack` – horizontal; `ZStack` – Tiefenachse • Verwenden Sie die Parameter `alignment:` und `spacing:` • `Spacer()` schiebt benachbarte Views an die Ränder • Verschachteln Sie Stacks für komplexe Layouts • Verwenden Sie `LazyVStack`/`LazyHStack` für große Listen Als Nächstes: LazyVGrid und LazyHGrid.

Häufig gestellte Fragen

Ist die Lektion „Grundlagen von VStack, HStack und ZStack“ kostenlos?

Ja — der vollständige Text von „Grundlagen von VStack, HStack und ZStack“ 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 „Grundlagen von VStack, HStack und ZStack“?

Stapeln Sie Views vertikal, horizontal und in der Tiefe mit Abständen und Ausrichtung. 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 1 von 4.

Wie lange dauert die Lektion „Grundlagen von VStack, HStack und ZStack“?

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