HStack: vad är det, HStack VStack ZStack i SwiftUI

Vad är HStack i SwiftUI?

HStack (Horizontal Stack) — är en SwiftUI-container som placerar underordnade vyer i en horisontell linje. Varje underordnat element tar upp så mycket plats som det behöver, om inte annat anges. HStack accepterar två obligatoriska parametrar: alignment (vertikal justering, standard .center) och spacing (avstånd mellan element, standard nil — systemavstånd). Enligt Apple Human Interface Guidelines (2025) är HStack det föredragna valet för knapppaneler, inmatningsrader och horisontella ikonlistor.

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

I detta exempel skapar HStack en rad med tre element: ikon, text och pil. Spacer() trycker isär elementen — ikonen med texten trycks mot vänsterkanten och pilen mot högerkanten. Alignment .center justerar alla tre elementen i mitten av den vertikala axeln.

VStack: vertikal layout och justering

VStack (Vertical Stack) — är en SwiftUI-container för vertikal placering av underordnade element uppifrån och ned. Liksom HStack accepterar den alignment (horisontell justering: .leading, .center, .trailing) och spacing. VStack är grunden för att bygga formulär, kort, profiler och inställningslistor. Enligt Apple Docs (2025) täcker VStack tillsammans med LazyVStack 85% av vertikala layoutsituationer i SwiftUI.

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

VStack med alignment .leading justerar alla rader till vänsterkanten. Inuti VStack finns en kapslad HStack för betyg — detta är ett typiskt mönster för att bygga komplexa layouter genom kapslade stackar. Spacing 8 skapar ett jämnt avstånd mellan textraderna.

ZStack: överlagring av element på djupet

ZStack (Z-axis Stack) — är en SwiftUI-container för att överlagra underordnade vyer ovanpå varandra längs djupaxeln. Det första elementet i ZStack:s kropp ritas i bakgrunden, det sista — i förgrunden. ZStack används för bakgrundsbilder med text över, anpassade indikatorer, överlagringsknappar och övergångsanimationer. Enligt Apple Docs (2025) justerar ZStack som standard alla element i mitten (alignment: .center), men stöder alla kombinationer av Alignment.

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

I detta exempel överlagrar ZStack tre lager: en bild av berg, en halvgenomskinlig svart färg för mörkläggning och text med en titel. Alignment .bottomLeading trycker texten till det nedre vänstra hörnet. Mörkläggningen (Color.black.opacity(0.3)) förbättrar läsbarheten av texten på ljusa delar av bilden.

Jämförelse av HStack, VStack och ZStack: när ska vilken användas

Valet av stack beror på layoutriktningen: HStack — horisontell layout (knappar, inmatningsrader), VStack — vertikal layout (formulär, kort), ZStack — överlagring (bakgrunder, överlägg). Enligt Apple Human Interface Guidelines (2025) kapslas stackar inuti varandra för komplexa layouter: den yttre VStacken innehåller HStack och ZStack inuti. LazyHStack och LazyVStack är lata versioner för stora samlingar.

Alignment och Spacing: finjustering av stackar

Parametrarna alignment och spacing ger full kontroll över placeringen av underordnade element i SwiftUI-stackar. Alignment i HStack styr vertikal justering av element med olika höjd. Alignment i VStack styr horisontell justering. Spacing bestämmer avståndet mellan alla underordnade element i stacken. Enligt SwiftUI Lab (2025) kan alignment vara både standard (.top, .center, .bottom) och anpassad via AlignmentID.

HStack(alignment: .top, spacing: 12) {
    Text("Rubrik")
        .font(.largeTitle)
    VStack(alignment: .leading) {
        Text("Underrubrik")
        Text("Beskrivning med ytterligare text")
            .font(.caption)
            .foregroundColor(.gray)
    }
}
.padding()

Här justerar alignment .top den stora titeln och den kapslade VStacken mot den övre kanten. Spacing 12 skapar avstånd mellan dem. Den kapslade VStacken med alignment .leading justerar underrubriken och beskrivningen mot vänsterkanten. Kombination av olika alignment inuti kapslade stackar möjliggör precis kontroll av layouten.

Kapslade stackar: exempel på att bygga komplexa layouter

Verkliga gränssnitt byggs genom kombination av kapslade HStack, VStack och ZStack. Produktkort — ett typiskt exempel: den yttre VStacken innehåller en bild (ZStack med överlägg), titel (Text), betyg (HStack) och pris. Enligt Apple Sample Projects (2025) överstiger kapslingsdjupet för stackar sällan 4 nivåer — djupare kapsling minskar kodläsbarhet och prestanda.

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()

I detta exempel kombinerar VStack ZStack (bild med rabattmärke), produktnamn och HStack (pris + betyg). ZStack använder alignment .topTrailing för att placera «-20%»-märket i det övre högra hörnet. Spacer i HStack trycker priset mot vänsterkanten och betyget mot högerkanten.