HStack: шта је, HStack VStack ZStack у SwiftUI

Шта је HStack у SwiftUI?

HStack (Horizontal Stack) — контејнер SwiftUI који поставља приказе у хоризонталну линију. Сваки елемент заузима онолико простора колико му је потребно, осим ако није другачије наведено. HStack прихвата два обавезна параметра: alignment (вертикално поравнање, подразумевано .center) и spacing (растојање између елемената, подразумевано nil — системски размак). Према Apple Human Interface Guidelines (2025), HStack је пожељан избор за панеле дугмади, редове за унос и хоризонталне листе икона.

HStack(alignment: .center, spacing: 16) {
    Image("star")
        .resizable()
        .frame(width: 24, height: 24)
    Text("Омиљено")
        .font(.body)
    Spacer()
    Image("chevron.right")
        .foregroundColor(.gray)
}
.padding()

У овом примеру HStack ствара ред од три елемента: икона, текст и стрелица. Spacer() раздваја елементе — икона са текстом прилепљени су уз леву ивицу, а стрелица уз десну. Alignment .center поравнава сва три елемента по центру вертикалне осе.

VStack: вертикални распоред и поравнање

VStack (Vertical Stack) — контејнер SwiftUI за вертикално постављање елемената одозго надоле. Слично HStack, прихвата alignment (хоризонтално поравнање: .leading, .center, .trailing) и spacing. VStack је основа за изградњу формулара, картица, профила и листа подешавања. Према Apple Docs (2025), VStack заједно са LazyVStack покрива 85% сценарија вертикалног распореда у SwiftUI.

VStack(alignment: .leading, spacing: 8) {
    Text("Назив рецепта")
        .font(.headline)
    Text("Време припреме: 30 мин")
        .font(.subheadline)
        .foregroundColor(.secondary)
    HStack(spacing: 4) {
        Image("star.fill")
            .foregroundColor(.yellow)
        Text("4.8")
    }
}

VStack са alignment .leading поравнава све редове уз леву ивицу. Унутар VStack је угњежден HStack за рејтинг — ово је типичан образац изградње сложених макета кроз угњеждене стекове. Spacing 8 ствара равномеран размак између редова текста.

ZStack: преклапање елемената по дубини

ZStack (Z-axis Stack) — контејнер SwiftUI за преклапање приказа један преко другог по оси дубине. Први елемент у телу ZStack се црта у позадини, последњи — у првом плану. ZStack се користи за позадинске слике са текстом преко, прилагођене индикаторе, преклопне дугмад и анимације прелаза. Према Apple Docs (2025), ZStack подразумевано поравнава све елементе по центру (alignment: .center), али подржава било коју комбинацију Alignment.

ZStack(alignment: .bottomLeading) {
    Image("mountains")
        .resizable()
        .scaledToFill()
        .frame(height: 200)
        .clipped()
    Color.black
        .opacity(0.3)
    Text("Планински пејзаж")
        .font(.title)
        .bold()
        .foregroundColor(.white)
        .padding()
}

У овом примеру ZStack поставља три слоја: слику планина, полупровидан црни слој за затамњење и текст са насловом. Alignment .bottomLeading прилепљује текст уз доњи леви угао. Затамњење (Color.black.opacity(0.3)) побољшава читљивост текста на светлим деловима слике.

Поређење HStack, VStack и ZStack: када који користити

Избор стека зависи од смера распореда: HStack — хоризонтални распоред (дугмад, редови за унос), VStack — вертикални распоред (формулари, картице), ZStack — преклапање (позадине, прекривачи). Према Apple Human Interface Guidelines (2025), за сложене макете стекови се угнежђују један у други: спољашњи VStack садржи HStack и ZStack унутра. LazyHStack и LazyVStack су лењиве верзије за велике колекције.

Alignment и Spacing: фино подешавање стекова

Параметри alignment и spacing дају потпуну контролу над положајем елемената у стековима SwiftUI. Alignment у HStack управља вертикалним поравнањем елемената различите висине. Alignment у VStack управља хоризонталним поравнањем. Spacing одређује растојање између свих елемената у стек. Према SwiftUI Lab (2025), alignment може бити стандардни (.top, .center, .bottom) и прилагођени путем AlignmentID.

HStack(alignment: .top, spacing: 12) {
    Text("Наслов")
        .font(.largeTitle)
    VStack(alignment: .leading) {
        Text("Поднаслов")
        Text("Опис са додатним текстом")
            .font(.caption)
            .foregroundColor(.gray)
    }
}
.padding()

Овде alignment .top поравнава велики наслов и угњеждени VStack уз горњу ивицу. Spacing 12 ствара размак између њих. Угњеждени VStack са alignment .leading поравнава поднаслов и опис уз леву ивицу. Комбинација различитих alignment унутар угњеждених стекова омогућава прецизну контролу макета.

Угњеждени стекови: примери изградње сложених макета

Стварни интерфејси се граде комбинацијом угњеждених HStack, VStack и ZStack. Картица производа — типичан пример: спољашњи VStack садржи слику (ZStack са прекривачем), наслов (Text), рејтинг (HStack) и цену. Према Apple Sample Projects (2025), дубина угњежђености стекова ретко прелази 4 нивоа — дубље угњежђење смањује читљивост кода и перформансе.

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

У овом примеру VStack обједињује ZStack (слика са значком попуста), назив производа и HStack (цена + рејтинг). ZStack користи alignment .topTrailing за постављање значке «-20%» у горњи десни угао. Spacer у HStack раздваја цену ка левој ивици, а рејтинг ка десној.