HStack: co to je, HStack VStack ZStack ve SwiftUI

Co je HStack ve SwiftUI?

HStack (Horizontal Stack) — je kontejner SwiftUI, který umísťuje podřízené pohledy do vodorovné řady. Každý podřízený prvek zabírá tolik místa, kolik potřebuje, pokud není uvedeno jinak. HStack přijímá dva povinné parametry: alignment (svislé zarovnání, výchozí .center) a spacing (vzdálenost mezi prvky, výchozí nil — systémová mezera). Podle Apple Human Interface Guidelines (2025) je HStack preferovanou volbou pro panely tlačítek, vstupní řádky a vodorovné seznamy ikon.

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

V tomto příkladu HStack vytváří řadu ze tří prvků: ikona, text a šipka. Spacer() odtlačuje prvky — ikona s textem jsou přitisknuty k levému okraji a šipka k pravému okraji. Alignment .center zarovnává všechny tři prvky na střed svislé osy.

VStack: svislé uspořádání a zarovnání

VStack (Vertical Stack) — je kontejner SwiftUI pro svislé umístění podřízených prvků shora dolů. Podobně jako HStack přijímá alignment (vodorovné zarovnání: .leading, .center, .trailing) a spacing. VStack je základem pro tvorbu formulářů, karet, profilů a seznamů nastavení. Podle Apple Docs (2025) pokrývá VStack spolu s LazyVStack 85 % scénářů svislého rozvržení ve SwiftUI.

VStack(alignment: .leading, spacing: 8) {
    Text("Název receptu")
        .font(.headline)
    Text("Doba přípravy: 30 min")
        .font(.subheadline)
        .foregroundColor(.secondary)
    HStack(spacing: 4) {
        Image("star.fill")
            .foregroundColor(.yellow)
        Text("4.8")
    }
}

VStack s alignment .leading zarovnává všechny řádky k levému okraji. Uvnitř VStack je vnořen HStack pro hodnocení — to je typický vzor tvorby složitých rozvržení pomocí vnořených stacků. Spacing 8 vytváří rovnoměrnou mezeru mezi řádky textu.

ZStack: překrývání prvků do hloubky

ZStack (Z-axis Stack) — je kontejner SwiftUI pro překrývání podřízených pohledů na sobě podél osy hloubky. První prvek v těle ZStack je vykreslen na pozadí, poslední — v popředí. ZStack se používá pro obrázky na pozadí s textem přes něj, vlastní indikátory, překrývající se tlačítka a přechodové animace. Podle Apple Docs (2025) ZStack ve výchozím nastavení zarovnává všechny prvky na střed (alignment: .center), ale podporuje libovolnou kombinaci Alignment.

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

V tomto příkladu ZStack překrývá tři vrstvy: obrázek hor, poloprůhlednou černou barvu pro ztmavení a text s názvem. Alignment .bottomLeading přitiskne text k levému dolnímu rohu. Ztmavení (Color.black.opacity(0.3)) zlepšuje čitelnost textu na světlých částech obrázku.

Srovnání HStack, VStack a ZStack: kdy který použít

Výběr stacku závisí na směru rozvržení: HStack — vodorovné uspořádání (tlačítka, vstupní řádky), VStack — svislé uspořádání (formuláře, karty), ZStack — překrývání (pozadí, překryvy). Podle Apple Human Interface Guidelines (2025) se pro složitá rozvržení stacky do sebe vnořují: vnější VStack obsahuje uvnitř HStack a ZStack. LazyHStack a LazyVStack jsou líné verze pro velké kolekce.

Alignment a Spacing: jemné ladění stacků

Parametry alignment a spacing poskytují plnou kontrolu nad umístěním podřízených prvků ve stackech SwiftUI. Alignment v HStack řídí svislé zarovnání prvků různé výšky. Alignment v VStack řídí vodorovné zarovnání. Spacing určuje vzdálenost mezi všemi podřízenými prvky ve stacku. Podle SwiftUI Lab (2025) může být alignment jak standardní (.top, .center, .bottom), tak vlastní prostřednictvím AlignmentID.

HStack(alignment: .top, spacing: 12) {
    Text("Nadpis")
        .font(.largeTitle)
    VStack(alignment: .leading) {
        Text("Podnadpis")
        Text("Popis s dalším textem")
            .font(.caption)
            .foregroundColor(.gray)
    }
}
.padding()

Zde alignment .top zarovnává velký nadpis a vnořený VStack k hornímu okraji. Spacing 12 vytváří mezeru mezi nimi. Vnořený VStack s alignment .leading zarovnává podnadpis a popis k levému okraji. Kombinace různých alignment uvnitř vnořených stacků umožňuje přesné řízení rozvržení.

Vnořené stacky: příklady tvorby složitých rozvržení

Skutečná rozhraní se staví kombinací vnořených HStack, VStack a ZStack. Karta produktu — typický příklad: vnější VStack obsahuje obrázek (ZStack s překryvem), název (Text), hodnocení (HStack) a cenu. Podle Apple Sample Projects (2025) hloubka vnoření stacků zřídka přesahuje 4 úrovně — hlubší vnoření snižuje čitelnost kódu a výkon.

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

V tomto příkladu VStack kombinuje ZStack (obrázek s odznakem slevy), název produktu a HStack (cena + hodnocení). ZStack používá alignment .topTrailing pro umístění odznaku «-20%» do pravého horního rohu. Spacer v HStack odtlačuje cenu k levému okraji a hodnocení k pravému okraji.