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 раздвигает цену к левому краю, а рейтинг к правому.