HStack: ce este, HStack VStack ZStack în SwiftUI

Ce este HStack în SwiftUI?

HStack (Horizontal Stack) — este un container SwiftUI care aranjează vederile copil într-o linie orizontală. Fiecare element copil ocupă atât spațiu cât are nevoie, dacă nu se specifică altfel. HStack primește doi parametri obligatorii: alignment (aliniere verticală, implicit .center) și spacing (distanța între elemente, implicit nil — distanță sistemică). Conform Apple Human Interface Guidelines (2025), HStack este alegerea preferată pentru panouri de butoane, rânduri de intrare și liste orizontale de pictograme.

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

În acest exemplu HStack creează un rând din trei elemente: pictogramă, text și săgeată. Spacer() împinge elementele — pictograma cu textul sunt lipite de marginea stângă, iar săgeata de marginea dreaptă. Alignment .center aliniază toate cele trei elemente pe centrul axei verticale.

VStack: aranjare verticală și aliniere

VStack (Vertical Stack) — este un container SwiftUI pentru aranjarea verticală a elementelor copil de sus în jos. La fel ca HStack, primește alignment (aliniere orizontală: .leading, .center, .trailing) și spacing. VStack este baza pentru construirea formularelor, cardurilor, profilurilor și listelor de setări. Conform Apple Docs (2025), VStack împreună cu LazyVStack acoperă 85% din scenariile de aranjare verticală în SwiftUI.

VStack(alignment: .leading, spacing: 8) {
    Text("Numele rețetei")
        .font(.headline)
    Text("Timp de preparare: 30 min")
        .font(.subheadline)
        .foregroundColor(.secondary)
    HStack(spacing: 4) {
        Image("star.fill")
            .foregroundColor(.yellow)
        Text("4.8")
    }
}

VStack cu alignment .leading aliniază toate rândurile la marginea stângă. În interiorul VStack este imbricat un HStack pentru rating — acesta este un model tipic de construire a machetelor complexe prin stive imbricate. Spacing 8 creează o distanță uniformă între rândurile de text.

ZStack: suprapunerea elementelor în adâncime

ZStack (Z-axis Stack) — este un container SwiftUI pentru suprapunerea vederilor copil una peste alta pe axa de adâncime. Primul element din corpul ZStack este desenat în fundal, ultimul — în prim-plan. ZStack este folosit pentru imagini de fundal cu text deasupra, indicatoare personalizate, butoane suprapuse și animații de tranziție. Conform Apple Docs (2025), ZStack în mod implicit aliniază toate elementele în centru (alignment: .center), dar suportă orice combinații de Alignment.

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

În acest exemplu ZStack suprapune trei straturi: imaginea munților, culoarea neagră semitransparentă pentru întunecare și textul cu titlul. Alignment .bottomLeading lipește textul de colțul din stânga jos. Întunecarea (Color.black.opacity(0.3)) îmbunătățește lizibilitatea textului pe porțiunile luminoase ale imaginii.

Comparația HStack, VStack și ZStack: când să folosești care

Alegerea stivei depinde de direcția de aranjare: HStack — aranjare orizontală (butoane, rânduri de intrare), VStack — aranjare verticală (formulare, carduri), ZStack — suprapunere (fundaluri, suprapuneri). Conform Apple Human Interface Guidelines (2025), pentru machete complexe stivele se imbrică una în alta: VStack exterior conține HStack și ZStack în interior. LazyHStack și LazyVStack sunt versiuni leneșe pentru colecții mari.

Alignment și Spacing: reglajul fin al stivelor

Parametrii alignment și spacing oferă control complet asupra amplasării elementelor copil în stivele SwiftUI. Alignment în HStack controlează alinierea verticală a elementelor de înălțimi diferite. Alignment în VStack controlează alinierea orizontală. Spacing stabilește distanța între toate elementele copil din stivă. Conform SwiftUI Lab (2025), alignment poate fi atât standard (.top, .center, .bottom), cât și personalizat prin AlignmentID.

HStack(alignment: .top, spacing: 12) {
    Text("Titlu")
        .font(.largeTitle)
    VStack(alignment: .leading) {
        Text("Subtitlu")
        Text("Descriere cu text suplimentar")
            .font(.caption)
            .foregroundColor(.gray)
    }
}
.padding()

Aici alignment .top aliniază titlul mare și VStack imbricat la marginea superioară. Spacing 12 creează distanță între ele. VStack imbricat cu alignment .leading aliniază subtitlul și descrierea la marginea stângă. Combinarea diferitelor alignment în interiorul stivelor imbricate permite controlul precis al machetei.

Stive imbricate: exemple de construire a machetelor complexe

Interfețele reale se construiesc prin combinarea HStack, VStack și ZStack imbricate. Cardul de produs — un exemplu tipic: VStack exterior conține imaginea (ZStack cu suprapunere), titlul (Text), ratingul (HStack) și prețul. Conform Apple Sample Projects (2025), adâncimea de imbricare a stivelor depășește rareori 4 nivele — o imbricare mai adâncă reduce lizibilitatea codului și performanța.

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("Smartfon Model X")
        .font(.headline)
    HStack(spacing: 8) {
        Text("$999")
            .font(.title2)
            .bold()
        Spacer()
        Image("star.fill")
            .foregroundColor(.yellow)
        Text("4.7")
    }
}
.padding()

În acest exemplu VStack combină ZStack (imaginea cu ecusonul de reducere), numele produsului și HStack (preț + rating). ZStack folosește alignment .topTrailing pentru plasarea ecusonului «-20%» în colțul din dreapta sus. Spacer în HStack împinge prețul la marginea stângă și ratingul la marginea dreaptă.