HStack: mi ez, HStack VStack ZStack a SwiftUI-ban

Mi az a HStack a SwiftUI-ban?

HStack (Horizontal Stack) — egy SwiftUI konténer, amely a gyermek nézeteket egy vízszintes vonalba rendezi. Minden gyermek elem annyi helyet foglal el, amennyire szüksége van, hacsak másképp nincs megadva. A HStack két kötelező paramétert fogad el: alignment (függőleges igazítás, alapértelmezett .center) és spacing (elemek közötti távolság, alapértelmezett nil — rendszer távolság). Az Apple Human Interface Guidelines (2025) szerint a HStack az előnyben részesített választás gombpanelekhez, beviteli sorokhoz és vízszintes ikonlistákhoz.

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

Ebben a példában a HStack egy sort hoz létre három elemből: ikon, szöveg és nyíl. A Spacer() széttolja az elemeket — az ikon a szöveggel a bal szélhez, a nyíl pedig a jobb szélhez préselődik. Az Alignment .center mindhárom elemet a függőleges tengely közepére igazítja.

VStack: függőleges elrendezés és igazítás

VStack (Vertical Stack) — egy SwiftUI konténer a gyermek elemek felülről lefelé történő függőleges elrendezéséhez. A HStackhoz hasonlóan fogadja az alignment (vízszintes igazítás: .leading, .center, .trailing) és spacing paramétereket. A VStack az űrlapok, kártyák, profilok és beállításlisták építésének alapja. Az Apple Docs (2025) szerint a VStack a LazyVStackkel együtt a SwiftUI függőleges elrendezési forgatókönyveinek 85%-át fedi le.

VStack(alignment: .leading, spacing: 8) {
    Text("Recept neve")
        .font(.headline)
    Text("Elkészítési idő: 30 perc")
        .font(.subheadline)
        .foregroundColor(.secondary)
    HStack(spacing: 4) {
        Image("star.fill")
            .foregroundColor(.yellow)
        Text("4.8")
    }
}

VStack alignment .leading beállítással az összes sort a bal szélhez igazítja. A VStack belsejében egy HStack van beágyazva az értékeléshez — ez egy tipikus minta összetett elrendezések építésére egymásba ágyazott stackekkel. A Spacing 8 egyenletes távolságot hoz létre a szövegsorok között.

ZStack: elemek egymásra helyezése mélységben

ZStack (Z-axis Stack) — egy SwiftUI konténer a gyermek nézetek egymásra helyezéséhez a mélységi tengely mentén. A ZStack testében az első elem a háttérben, az utolsó az előtérben rajzolódik ki. A ZStack háttérképekhez szöveggel, egyedi jelzőkhöz, átfedő gombokhoz és átmeneti animációkhoz használatos. Az Apple Docs (2025) szerint a ZStack alapértelmezés szerint az összes elemet középre igazítja (alignment: .center), de az Alignment bármely kombinációját támogatja.

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

Ebben a példában a ZStack három réteget helyez egymásra: hegyi tájképet, félig átlátszó fekete színt a sötétítéshez és szöveget címmel. Az Alignment .bottomLeading a szöveget a bal alsó sarokba préseli. A sötétítés (Color.black.opacity(0.3)) javítja a szöveg olvashatóságát a kép világos részein.

HStack, VStack és ZStack összehasonlítása: mikor melyiket használjuk

A stack kiválasztása az elrendezés irányától függ: HStack — vízszintes elrendezés (gombok, beviteli sorok), VStack — függőleges elrendezés (űrlapok, kártyák), ZStack — egymásra helyezés (hátterek, átfedések). Az Apple Human Interface Guidelines (2025) szerint összetett elrendezésekhez a stackek egymásba ágyazhatók: a külső VStack HStack és ZStack elemeket tartalmaz. A LazyHStack és LazyVStack lusta verziók nagy gyűjteményekhez.

Alignment és Spacing: a stackek finomhangolása

Az alignment és spacing paraméterek teljes irányítást adnak a gyermek elemek elhelyezése felett a SwiftUI stackekben. Az alignment a HStackben a különböző magasságú elemek függőleges igazítását vezérli. Az alignment a VStackben a vízszintes igazítást vezérli. A spacing meghatározza a stackben lévő összes gyermek elem közötti távolságot. A SwiftUI Lab (2025) szerint az alignment lehet szabványos (.top, .center, .bottom) és egyedi az AlignmentID-n keresztül.

HStack(alignment: .top, spacing: 12) {
    Text("Cím")
        .font(.largeTitle)
    VStack(alignment: .leading) {
        Text("Alcím")
        Text("Leírás kiegészítő szöveggel")
            .font(.caption)
            .foregroundColor(.gray)
    }
}
.padding()

Itt az alignment .top a nagy címet és a beágyazott VStacket a felső szélhez igazítja. A Spacing 12 távolságot hoz létre közöttük. A beágyazott VStack alignment .leading beállítással az alcímet és leírást a bal szélhez igazítja. A különböző alignment kombinációja a beágyazott stackeken belül lehetővé teszi az elrendezés pontos vezérlését.

Egymásba ágyazott stackek: példák összetett elrendezések építésére

A valódi interfészek egymásba ágyazott HStack, VStack és ZStack kombinációjával épülnek. Termékkártya — tipikus példa: a külső VStack tartalmazza a képet (ZStack átfedéssel), a címet (Text), az értékelést (HStack) és az árat. Az Apple Sample Projects (2025) szerint a stackek beágyazási mélysége ritkán haladja meg a 4 szintet — a mélyebb beágyazás csökkenti a kód olvashatóságát és a teljesítményt.

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

Ebben a példában a VStack egyesíti a ZStacket (kép kedvezményjelvénnyel), a termék nevét és a HStacket (ár + értékelés). A ZStack alignment .topTrailing beállítást használ a «-20%» jelvény jobb felső sarokba helyezéséhez. A Spacer a HStackben az árat a bal szélhez, az értékelést pedig a jobb szélhez tolja.