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 раздалечава цената към левия край и рейтинга към десния край.