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 керує вертикальним вирівнюванням елементів різної висоти. VStack alignment керує горизонтальним вирівнюванням. 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("Смартфон 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 розсуває ціну до лівого краю, а рейтинг до правого.