HStack: what it is, HStack VStack ZStack in SwiftUI

What is HStack in SwiftUI?

HStack (Horizontal Stack) is a SwiftUI container that arranges child views in a horizontal line. Each child element takes as much space as it needs, unless specified otherwise. HStack accepts two required parameters: alignment (vertical alignment, default .center) and spacing (distance between elements, default nil — system spacing). According to Apple Human Interface Guidelines (2025), HStack is the preferred choice for button bars, input rows, and horizontal icon lists.

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

In this example, HStack creates a row of three elements: an icon, text, and an arrow. Spacer() pushes the elements apart — the icon and text are aligned to the left edge, and the arrow to the right edge. Alignment .center aligns all three elements along the vertical center axis.

VStack: vertical layout and alignment

VStack (Vertical Stack) is a SwiftUI container for vertically arranging child elements from top to bottom. Similar to HStack, it accepts alignment (horizontal alignment: .leading, .center, .trailing) and spacing. VStack is the foundation for building forms, cards, profiles, and settings lists. According to Apple Docs (2025), VStack paired with LazyVStack covers 85% of vertical layout scenarios in SwiftUI.

VStack(alignment: .leading, spacing: 8) {
    Text("Recipe name")
        .font(.headline)
    Text("Preparation time: 30 min")
        .font(.subheadline)
        .foregroundColor(.secondary)
    HStack(spacing: 4) {
        Image("star.fill")
            .foregroundColor(.yellow)
        Text("4.8")
    }
}

VStack with alignment .leading aligns all rows to the left edge. Inside the VStack, an HStack is nested for the rating — this is a typical pattern for building complex layouts through nested stacks. Spacing 8 creates an even gap between text lines.

ZStack: layering elements by depth

ZStack (Z-axis Stack) is a SwiftUI container for layering child views on top of each other along the depth axis. The first element in the ZStack body is drawn in the background, the last — in the foreground. ZStack is used for background images with text on top, custom indicators, overlay buttons, and transition animations. According to Apple Docs (2025), ZStack by default aligns all elements to the center (alignment: .center) but supports any Alignment combinations.

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

In this example, ZStack layers three layers: a mountain image, a semi-transparent black color for dimming, and a title text. Alignment .bottomLeading pins the text to the bottom-left corner. Dimming (Color.black.opacity(0.3)) improves text readability on bright areas of the image.

HStack vs VStack vs ZStack: when to use which

The choice of stack depends on the layout direction: HStack — horizontal arrangement (buttons, input rows), VStack — vertical arrangement (forms, cards), ZStack — layering (backgrounds, overlays). According to Apple Human Interface Guidelines (2025), for complex layouts stacks are nested within each other: an outer VStack contains HStack and ZStack inside. LazyHStack and LazyVStack are lazy versions for large collections.

Alignment and Spacing: fine-tuning stacks

The alignment and spacing parameters give full control over the positioning of child elements in SwiftUI stacks. Alignment in HStack controls vertical alignment of elements with different heights. VStack alignment controls horizontal alignment. Spacing sets the distance between all child elements in the stack. According to SwiftUI Lab (2025), alignment can be either standard (.top, .center, .bottom) or custom via AlignmentID.

HStack(alignment: .top, spacing: 12) {
    Text("Title")
        .font(.largeTitle)
    VStack(alignment: .leading) {
        Text("Subtitle")
        Text("Description with additional text")
            .font(.caption)
            .foregroundColor(.gray)
    }
}
.padding()

Here, alignment .top aligns the large title and the nested VStack along the top edge. Spacing 12 creates a gap between them. The nested VStack with alignment .leading aligns the subtitle and description to the left edge. Combining different alignments inside nested stacks allows precise layout control.

Nested stacks: building complex layouts examples

Real interfaces are built by combining nested HStack, VStack, and ZStack. A product card is a typical example: an outer VStack contains an image (ZStack with overlay), a title (Text), a rating (HStack), and a price. According to Apple Sample Projects (2025), the nesting depth of stacks rarely exceeds 4 levels — deeper nesting reduces code readability and performance.

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

In this example, VStack combines a ZStack (image with a discount badge), a product name, and an HStack (price + rating). ZStack uses alignment .topTrailing to place the "-20%" badge in the top-right corner. Spacer in HStack pushes the price to the left edge and the rating to the right edge.