HStack: was es ist, HStack VStack ZStack in SwiftUI

Was ist HStack in SwiftUI?

HStack (Horizontal Stack) ist ein SwiftUI-Container, der Kind-Views in einer horizontalen Linie anordnet. Jedes Kind-Element nimmt so viel Platz ein, wie es benötigt, sofern nicht anders angegeben. HStack akzeptiert zwei erforderliche Parameter: alignment (vertikale Ausrichtung, Standard .center) und spacing (Abstand zwischen Elementen, Standard nil — Systemabstand). Laut Apple Human Interface Guidelines (2025) ist HStack die bevorzugte Wahl für Button-Leisten, Eingabezeilen und horizontale Icon-Listen.

HStack(alignment: .center, spacing: 16) {
    Image("star")
        .resizable()
        .frame(width: 24, height: 24)
    Text("Favoriten")
        .font(.body)
    Spacer()
    Image("chevron.right")
        .foregroundColor(.gray)
}
.padding()

In diesem Beispiel erstellt HStack eine Reihe von drei Elementen: ein Icon, Text und einen Pfeil. Spacer() drückt die Elemente auseinander — Icon und Text werden an den linken Rand und der Pfeil an den rechten Rand gedrückt. Alignment .center richtet alle drei Elemente entlang der vertikalen Mittelachse aus.

VStack: vertikales Layout und Ausrichtung

VStack (Vertical Stack) ist ein SwiftUI-Container zum vertikalen Anordnen von Kind-Elementen von oben nach unten. Ähnlich wie HStack akzeptiert er alignment (horizontale Ausrichtung: .leading, .center, .trailing) und spacing. VStack ist die Grundlage für die Erstellung von Formularen, Karten, Profilen und Einstellungslisten. Laut Apple Docs (2025) deckt VStack zusammen mit LazyVStack 85% der vertikalen Layout-Szenarien in SwiftUI ab.

VStack(alignment: .leading, spacing: 8) {
    Text("Rezeptname")
        .font(.headline)
    Text("Zubereitungszeit: 30 Min")
        .font(.subheadline)
        .foregroundColor(.secondary)
    HStack(spacing: 4) {
        Image("star.fill")
            .foregroundColor(.yellow)
        Text("4.8")
    }
}

VStack mit alignment .leading richtet alle Zeilen am linken Rand aus. Innerhalb des VStack ist ein HStack für die Bewertung verschachtelt — dies ist ein typisches Muster für den Aufbau komplexer Layouts durch verschachtelte Stacks. Spacing 8 erzeugt einen gleichmäßigen Abstand zwischen den Textzeilen.

ZStack: Überlagerung von Elementen nach Tiefe

ZStack (Z-Achsen-Stack) ist ein SwiftUI-Container zum Überlagern von Kind-Views entlang der Tiefenachse. Das erste Element im ZStack-Rumpf wird im Hintergrund gezeichnet, das letzte im Vordergrund. ZStack wird für Hintergrundbilder mit darüberliegendem Text, benutzerdefinierte Indikatoren, Overlay-Buttons und Übergangsanimationen verwendet. Laut Apple Docs (2025) richtet ZStack standardmäßig alle Elemente zentriert aus (alignment: .center), unterstützt aber beliebige Alignment-Kombinationen.

ZStack(alignment: .bottomLeading) {
    Image("mountains")
        .resizable()
        .scaledToFill()
        .frame(height: 200)
        .clipped()
    Color.black
        .opacity(0.3)
    Text("Berglandschaft")
        .font(.title)
        .bold()
        .foregroundColor(.white)
        .padding()
}

In diesem Beispiel überlagert ZStack drei Ebenen: ein Bergbild, eine halbtransparente schwarze Farbe zum Abdunkeln und einen Titeltext. Alignment .bottomLeading fixiert den Text in der unteren linken Ecke. Die Abdunkelung (Color.black.opacity(0.3)) verbessert die Lesbarkeit des Textes auf hellen Bildbereichen.

HStack vs VStack vs ZStack: wann welchen verwenden

Die Wahl des Stacks hängt von der Layout-Richtung ab: HStack — horizontale Anordnung (Buttons, Eingabezeilen), VStack — vertikale Anordnung (Formulare, Karten), ZStack — Überlagerung (Hintergründe, Overlays). Laut Apple Human Interface Guidelines (2025) werden bei komplexen Layouts Stacks ineinander verschachtelt: Ein äußerer VStack enthält HStack und ZStack im Inneren. LazyHStack und LazyVStack sind faule Versionen für große Sammlungen.

Alignment und Spacing: Feinabstimmung von Stacks

Die Parameter alignment und spacing geben volle Kontrolle über die Positionierung der Kind-Elemente in SwiftUI-Stacks. Alignment in HStack steuert die vertikale Ausrichtung von Elementen unterschiedlicher Höhe. VStack alignment steuert die horizontale Ausrichtung. Spacing legt den Abstand zwischen allen Kind-Elementen im Stack fest. Laut SwiftUI Lab (2025) kann alignment entweder Standard (.top, .center, .bottom) oder benutzerdefiniert über AlignmentID sein.

HStack(alignment: .top, spacing: 12) {
    Text("Titel")
        .font(.largeTitle)
    VStack(alignment: .leading) {
        Text("Untertitel")
        Text("Beschreibung mit zusätzlichem Text")
            .font(.caption)
            .foregroundColor(.gray)
    }
}
.padding()

Hier richtet alignment .top den großen Titel und den verschachtelten VStack entlang der Oberkante aus. Spacing 12 erzeugt einen Abstand zwischen ihnen. Der verschachtelte VStack mit alignment .leading richtet den Untertitel und die Beschreibung am linken Rand aus. Die Kombination verschiedener Alignments innerhalb verschachtelter Stacks ermöglicht eine präzise Layout-Steuerung.

Verschachtelte Stacks: Beispiele für komplexe Layouts

Echte Oberflächen werden durch die Kombination verschachtelter HStack-, VStack- und ZStack-Elemente erstellt. Eine Produktkarte ist ein typisches Beispiel: Ein äußerer VStack enthält ein Bild (ZStack mit Overlay), einen Titel (Text), eine Bewertung (HStack) und einen Preis. Laut Apple Sample Projects (2025) überschreitet die Verschachtelungstiefe von Stacks selten 4 Ebenen — tiefere Verschachtelung reduziert die Code-Lesbarkeit und Leistung.

VStack(spacing: 12) {
    ZStack(alignment: .topTrailing) {
        Image("product")
            .resizable()
            .scaledToFit()
        Text("-20%")
            .font(.caption)
            .bold()
            .foregroundColor(.white)
            .padding(6)
            .background(Color.red)
            .cornerRadius(4)
    }
    Text("Smartphone Model X")
        .font(.headline)
    HStack(spacing: 8) {
        Text("$999")
            .font(.title2)
            .bold()
        Spacer()
        Image("star.fill")
            .foregroundColor(.yellow)
        Text("4.7")
    }
}
.padding()

In diesem Beispiel kombiniert VStack einen ZStack (Bild mit Rabatt-Badge), einen Produktnamen und einen HStack (Preis + Bewertung). ZStack verwendet alignment .topTrailing, um das „-20%“-Badge in der oberen rechten Ecke zu platzieren. Spacer im HStack drückt den Preis an den linken Rand und die Bewertung an den rechten Rand.