HStack: co to, HStack VStack ZStack w SwiftUI

Czym jest HStack w SwiftUI?

HStack (Horizontal Stack) — to kontener SwiftUI, który umieszcza widoki potomne w poziomym rzędzie. Każdy element potomny zajmuje tyle miejsca, ile potrzebuje, chyba że określono inaczej. HStack przyjmuje dwa obowiązkowe parametry: alignment (wyrównanie pionowe, domyślnie .center) i spacing (odległość między elementami, domyślnie nil — odstęp systemowy). Według Apple Human Interface Guidelines (2025), HStack to preferowany wybór dla paneli przycisków, wierszy wprowadzania i poziomych list ikon.

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

W tym przykładzie HStack tworzy wiersz z trzech elementów: ikona, tekst i strzałka. Spacer() rozsuwa elementy — ikona z tekstem są dociskane do lewej krawędzi, a strzałka do prawej. Alignment .center wyrównuje wszystkie trzy elementy względem osi pionowej.

VStack: układ pionowy i wyrównanie

VStack (Vertical Stack) — to kontener SwiftUI do pionowego układania elementów potomnych od góry do dołu. Podobnie jak HStack, przyjmuje alignment (wyrównanie poziome: .leading, .center, .trailing) i spacing. VStack to podstawa budowania formularzy, kart, profili i list ustawień. Według Apple Docs (2025), VStack w parze z LazyVStack pokrywa 85% scenariuszy układu pionowego w SwiftUI.

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

VStack z alignment .leading wyrównuje wszystkie wiersze do lewej krawędzi. Wewnątrz VStack zagnieżdżono HStack dla oceny — to typowy wzorzec budowania złożonych układów przez zagnieżdżone stosy. Spacing 8 tworzy równomierny odstęp między wierszami tekstu.

ZStack: nakładanie elementów w głębi

ZStack (Z-axis Stack) — to kontener SwiftUI do nakładania widoków potomnych na siebie w osi głębi. Pierwszy element w ciele ZStack rysowany jest w tle, ostatni — na pierwszym planie. ZStack jest używany do obrazów tła z tekstem na wierzchu, niestandardowych wskaźników, przycisków nakładanych i animacji przejść. Według Apple Docs (2025), ZStack domyślnie wyrównuje wszystkie elementy do środka (alignment: .center), ale obsługuje dowolne kombinacje Alignment.

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

W tym przykładzie ZStack nakłada trzy warstwy: obraz gór, półprzezroczysty czarny kolor do przyciemnienia i tekst z tytułem. Alignment .bottomLeading dociska tekst do lewego dolnego rogu. Przyciemnienie (Color.black.opacity(0.3)) poprawia czytelność tekstu na jasnych fragmentach obrazu.

Porównanie HStack, VStack i ZStack: kiedy którego użyć

Wybór stosu zależy od kierunku układu: HStack — układ poziomy (przyciski, wiersze wprowadzania), VStack — układ pionowy (formularze, karty), ZStack — nakładanie (tła, nakładki). Według Apple Human Interface Guidelines (2025), w złożonych układach stosy są zagnieżdżane: zewnętrzny VStack zawiera wewnątrz HStack i ZStack. LazyHStack i LazyVStack to leniwe wersje dla dużych kolekcji.

Alignment i Spacing: precyzyjna konfiguracja stosów

Parametry alignment i spacing dają pełną kontrolę nad rozmieszczeniem elementów potomnych w stosach SwiftUI. Alignment w HStack zarządza pionowym wyrównaniem elementów o różnej wysokości. Alignment w VStack zarządza poziomym wyrównaniem. Spacing określa odległość między wszystkimi elementami potomnymi w stosie. Według SwiftUI Lab (2025), alignment może być zarówno standardowy (.top, .center, .bottom), jak i niestandardowy przez AlignmentID.

HStack(alignment: .top, spacing: 12) {
    Text("Nagłówek")
        .font(.largeTitle)
    VStack(alignment: .leading) {
        Text("Podtytuł")
        Text("Opis z dodatkowym tekstem")
            .font(.caption)
            .foregroundColor(.gray)
    }
}
.padding()

Tutaj alignment .top wyrównuje duży tytuł i zagnieżdżony VStack względem górnej krawędzi. Spacing 12 tworzy odstęp między nimi. Zagnieżdżony VStack z alignment .leading wyrównuje podtytuł i opis do lewej krawędzi. Kombinacja różnych alignment wewnątrz zagnieżdżonych stosów pozwala precyzyjnie kontrolować układ.

Zagnieżdżone stosy: przykłady budowania złożonych układów

Rzeczywiste interfejsy buduje się przez kombinację zagnieżdżonych HStack, VStack i ZStack. Karta produktu — typowy przykład: zewnętrzny VStack zawiera obraz (ZStack z nakładką), tytuł (Text), ocenę (HStack) i cenę. Według Apple Sample Projects (2025), głębokość zagnieżdżenia stosów rzadko przekracza 4 poziomy — głębsze zagnieżdżenie zmniejsza czytelność kodu i wydajność.

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

W tym przykładzie VStack łączy ZStack (obraz ze znacznikiem rabatowym), nazwę produktu i HStack (cena + ocena). ZStack używa alignment .topTrailing do umieszczenia znaczka «-20%» w prawym górnym rogu. Spacer w HStack rozsuwa cenę do lewej krawędzi, a ocenę do prawej.