HStack: ano ito, HStack VStack ZStack sa SwiftUI

Ano ang HStack sa SwiftUI?

HStack (Horizontal Stack) — ay isang SwiftUI container na nag-aayos ng mga child view sa isang pahalang na linya. Bawat child element ay kumukuha ng kasing daming espasyo na kailangan nito, maliban kung iba ang tinukoy. Ang HStack ay tumatanggap ng dalawang mandatoryong parameter: alignment (patayong pagkakapantay, default .center) at spacing (distansya sa pagitan ng mga elemento, default nil — system spacing). Ayon sa Apple Human Interface Guidelines (2025), ang HStack ay ang ginustong pagpipilian para sa mga panel ng button, input row, at pahalang na listahan ng icon.

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

Sa halimbawang ito, ang HStack ay gumagawa ng isang hilera ng tatlong elemento: icon, teksto, at arrow. Itinutulak ng Spacer() ang mga elemento — ang icon na may teksto ay dumidikit sa kaliwang gilid, at ang arrow sa kanang gilid. Ang Alignment .center ay pinapantay ang lahat ng tatlong elemento sa gitna ng patayong axis.

VStack: patayong ayos at pagkakapantay

VStack (Vertical Stack) — ay isang SwiftUI container para sa patayong pag-aayos ng mga child element mula itaas pababa. Katulad ng HStack, tumatanggap ito ng alignment (pahalang na pagkakapantay: .leading, .center, .trailing) at spacing. Ang VStack ay pundasyon para sa pagbuo ng mga form, card, profile, at listahan ng setting. Ayon sa Apple Docs (2025), ang VStack kasama ang LazyVStack ay sumasaklaw sa 85% ng mga senaryo ng patayong layout sa SwiftUI.

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

VStack na may alignment .leading ay pinapantay ang lahat ng hilera sa kaliwang gilid. Sa loob ng VStack ay may nested na HStack para sa rating — ito ay isang tipikal na pattern ng pagbuo ng komplikadong layout sa pamamagitan ng nested stack. Ang Spacing 8 ay lumilikha ng pantay na distansya sa pagitan ng mga hilera ng teksto.

ZStack: pagpapatong ng mga elemento sa lalim

ZStack (Z-axis Stack) — ay isang SwiftUI container para sa pagpapatong ng mga child view sa ibabaw ng bawat isa sa depth axis. Ang unang elemento sa body ng ZStack ay iginuhit sa background, ang huli — sa foreground. Ginagamit ang ZStack para sa mga background na imahe na may teksto sa ibabaw, custom indicator, overlay na button, at transition animation. Ayon sa Apple Docs (2025), ang ZStack bilang default ay pinapantay ang lahat ng elemento sa gitna (alignment: .center), ngunit sumusuporta sa anumang kombinasyon ng Alignment.

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

Sa halimbawang ito, ang ZStack ay nagpapatong ng tatlong layer: larawan ng bundok, semi-transparent na itim na kulay para sa pagdidilim, at teksto na may pamagat. Ang Alignment .bottomLeading ay dumidikit ng teksto sa ibabang kaliwang sulok. Ang pagdidilim (Color.black.opacity(0.3)) ay nagpapabuti sa pagiging madaling mabasa ng teksto sa maliwanag na bahagi ng larawan.

Paghahambing ng HStack, VStack at ZStack: kailan gagamitin ang alin

Ang pagpili ng stack ay nakadepende sa direksyon ng layout: HStack — pahalang na ayos (button, input row), VStack — patayong ayos (form, card), ZStack — pagpapatong (background, overlay). Ayon sa Apple Human Interface Guidelines (2025), para sa komplikadong layout, ang mga stack ay nini-nest sa isa't isa: ang panlabas na VStack ay naglalaman ng HStack at ZStack sa loob. Ang LazyHStack at LazyVStack ay mga tamad na bersyon para sa malalaking koleksyon.

Alignment at Spacing: mainam na pag-aayos ng mga stack

Ang mga parameter na alignment at spacing ay nagbibigay ng buong kontrol sa paglalagay ng mga child element sa SwiftUI stack. Ang alignment sa HStack ay kumokontrol sa patayong pagkakapantay ng mga elemento na may iba't ibang taas. Ang alignment sa VStack ay kumokontrol sa pahalang na pagkakapantay. Tinutukoy ng spacing ang distansya sa pagitan ng lahat ng child element sa stack. Ayon sa SwiftUI Lab (2025), ang alignment ay maaaring standard (.top, .center, .bottom) o custom sa pamamagitan ng AlignmentID.

HStack(alignment: .top, spacing: 12) {
    Text("Pamagat")
        .font(.largeTitle)
    VStack(alignment: .leading) {
        Text("Subtitle")
        Text("Paglalarawan na may karagdagang teksto")
            .font(.caption)
            .foregroundColor(.gray)
    }
}
.padding()

Dito, alignment .top ay pinapantay ang malaking pamagat at nested VStack sa itaas na gilid. Ang Spacing 12 ay lumilikha ng distansya sa pagitan nila. Ang nested VStack na may alignment .leading ay pinapantay ang subtitle at deskripsyon sa kaliwang gilid. Ang kombinasyon ng iba't ibang alignment sa loob ng nested stack ay nagbibigay-daan sa tumpak na kontrol ng layout.

Nested stack: mga halimbawa ng pagbuo ng komplikadong layout

Ang tunay na interface ay binuo sa pamamagitan ng kombinasyon ng nested HStack, VStack at ZStack. Card ng produkto — isang tipikal na halimbawa: ang panlabas na VStack ay naglalaman ng larawan (ZStack na may overlay), pamagat (Text), rating (HStack) at presyo. Ayon sa Apple Sample Projects (2025), ang lalim ng nesting ng stack ay bihirang lumampas sa 4 na antas — mas malalim na nesting ay nagbabawas ng pagiging madaling mabasa ng code at pagganap.

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

Sa halimbawang ito, ang VStack ay pinagsasama ang ZStack (larawan na may discount badge), pangalan ng produkto at HStack (presyo + rating). Ang ZStack ay gumagamit ng alignment .topTrailing para ilagay ang «-20%» badge sa kanang itaas na sulok. Itinutulak ng Spacer sa HStack ang presyo sa kaliwang gilid at ang rating sa kanang gilid.