HStack: wat is het, HStack VStack ZStack in SwiftUI

Wat is HStack in SwiftUI?

HStack (Horizontal Stack) — is een SwiftUI-container die onderliggende weergaven in een horizontale lijn plaatst. Elk onderliggend element neemt zoveel ruimte in als nodig, tenzij anders aangegeven. HStack accepteert twee verplichte parameters: alignment (verticale uitlijning, standaard .center) en spacing (afstand tussen elementen, standaard nil — systeemafstand). Volgens Apple Human Interface Guidelines (2025) is HStack de voorkeurskeuze voor knoppenpanelen, invoerrijen en horizontale lijsten met pictogrammen.

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

In dit voorbeeld maakt HStack een rij van drie elementen: pictogram, tekst en pijl. Spacer() duwt de elementen uit elkaar — het pictogram met tekst worden naar de linkerrand gedrukt en de pijl naar de rechterrand. Alignment .center lijnt alle drie elementen uit op het midden van de verticale as.

VStack: verticale plaatsing en uitlijning

VStack (Vertical Stack) — is een SwiftUI-container voor het verticaal plaatsen van onderliggende elementen van boven naar beneden. Net als HStack accepteert het alignment (horizontale uitlijning: .leading, .center, .trailing) en spacing. VStack is de basis voor het bouwen van formulieren, kaarten, profielen en instellingenlijsten. Volgens Apple Docs (2025) dekt VStack samen met LazyVStack 85% van de scenario's voor verticale lay-out in SwiftUI.

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

VStack met alignment .leading lijnt alle rijen uit op de linkerrand. Binnen de VStack is een HStack voor beoordeling genest — dit is een typisch patroon voor het bouwen van complexe layouts via geneste stacks. Spacing 8 creëert een gelijkmatige afstand tussen de tekstregels.

ZStack: elementen over elkaar heen plaatsen in de diepte

ZStack (Z-axis Stack) — is een SwiftUI-container voor het over elkaar heen plaatsen van onderliggende weergaven op de diepte-as. Het eerste element in de body van ZStack wordt op de achtergrond getekend, het laatste op de voorgrond. ZStack wordt gebruikt voor achtergrondafbeeldingen met tekst erover, aangepaste indicatoren, overlay-knoppen en overgangsanimaties. Volgens Apple Docs (2025) lijnt ZStack standaard alle elementen uit op het midden (alignment: .center), maar ondersteunt het elke combinatie van Alignment.

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

In dit voorbeeld plaatst ZStack drie lagen over elkaar: een afbeelding van bergen, een halfdoorzichtige zwarte kleur voor verdonkering en tekst met een titel. Alignment .bottomLeading duwt de tekst naar de linkeronderhoek. Verdonkering (Color.black.opacity(0.3)) verbetert de leesbaarheid van tekst op lichte delen van de afbeelding.

Vergelijking van HStack, VStack en ZStack: wanneer gebruik je welke

De keuze van de stack hangt af van de lay-outrichting: HStack — horizontale plaatsing (knoppen, invoerrijen), VStack — verticale plaatsing (formulieren, kaarten), ZStack — over elkaar heen plaatsen (achtergronden, overlays). Volgens Apple Human Interface Guidelines (2025) worden stacks voor complexe layouts in elkaar genest: de buitenste VStack bevat HStack en ZStack erin. LazyHStack en LazyVStack zijn luie versies voor grote collecties.

Alignment en Spacing: fijnafstelling van stacks

De parameters alignment en spacing geven volledige controle over de plaatsing van onderliggende elementen in SwiftUI-stacks. Alignment in HStack regelt de verticale uitlijning van elementen met verschillende hoogtes. Alignment in VStack regelt de horizontale uitlijning. Spacing bepaalt de afstand tussen alle onderliggende elementen in de stack. Volgens SwiftUI Lab (2025) kan alignment zowel standaard (.top, .center, .bottom) als aangepast zijn via AlignmentID.

HStack(alignment: .top, spacing: 12) {
    Text("Titel")
        .font(.largeTitle)
    VStack(alignment: .leading) {
        Text("Subtitel")
        Text("Beschrijving met extra tekst")
            .font(.caption)
            .foregroundColor(.gray)
    }
}
.padding()

Hier lijnt alignment .top de grote titel en de geneste VStack uit op de bovenrand. Spacing 12 creëert afstand ertussen. De geneste VStack met alignment .leading lijnt de subtitel en beschrijving uit op de linkerrand. Combinatie van verschillende alignment binnen geneste stacks maakt nauwkeurige controle van de lay-out mogelijk.

Geneste stacks: voorbeelden van het bouwen van complexe layouts

Echte interfaces worden gebouwd door combinatie van geneste HStack, VStack en ZStack. Productkaart — een typisch voorbeeld: de buitenste VStack bevat een afbeelding (ZStack met overlay), titel (Text), beoordeling (HStack) en prijs. Volgens Apple Sample Projects (2025) overschrijdt de nestdiepte van stacks zelden 4 niveaus — diepere nesting vermindert de leesbaarheid van code en prestaties.

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 dit voorbeeld combineert VStack ZStack (afbeelding met kortingsbadge), productnaam en HStack (prijs + beoordeling). ZStack gebruikt alignment .topTrailing om de «-20%» badge in de rechterbovenhoek te plaatsen. Spacer in HStack duwt de prijs naar de linkerrand en de beoordeling naar de rechterrand.