Using Stacks to Arrange Views

Learn how to combine VStack, HStack, and ZStack to build clear, layered layouts with predictable spacing.

Getting Started with SwiftUI Stacks

Learn the basics of arranging views vertically with VStack

Step 1

Create Your First VStack

A VStack is a container view that arranges its child views in a vertical line. This is one of the most fundamental layout tools in SwiftUI.

To create a VStack, simply wrap your views inside the VStack initializer. SwiftUI will automatically stack them from top to bottom.

Key points:

VStack stands for "Vertical Stack"
Child views are arranged top to bottom
Default spacing is automatically applied

Step 2

Add Text Views

Now let's add some text views inside our VStack. Each Text view will appear on its own line, stacked vertically.

Notice how SwiftUI automatically provides spacing between the text elements. This default spacing creates a clean, readable layout without any additional configuration.

**Tip:** Text views inherit the default font and styling from the environment unless you specify otherwise.

Step 3

Understanding the Structure

Let's take a moment to understand what we've built. The VStack acts as a container, and the closing brace marks where the vertical stack ends.

Everything between the opening VStack { and closing } will be arranged vertically. This is the fundamental pattern you'll use throughout SwiftUI development.

Step 4

Customize Spacing

You can control the spacing between views by passing a spacing parameter to the VStack initializer. Let's change our VStack to use custom spacing.

The spacing value is measured in points. A spacing of 20 creates more generous whitespace between elements compared to the default.

Common spacing values:

0 - No spacing (views touch)
8 - Tight spacing
20 - Comfortable spacing
40 - Generous spacing

Advanced Stack Techniques

Explore alignment, padding, and combining multiple stack types

Step 1

Add Alignment

By default, VStack centers its content horizontally. You can change this by specifying an alignment parameter. Let's align our text to the leading edge (left side in left-to-right languages).

The alignment parameter comes before the spacing parameter. SwiftUI offers several alignment options: .leading, .center, .trailing.

Step 2

Highlight Alignment Impact

See how the alignment parameter affects all child views? Each text element is now aligned to the leading edge, creating a left-aligned column of text.

This is particularly useful when building forms, lists, or any interface where left-aligned text improves readability.

Step 3

Add Padding

Padding creates space around your VStack. By adding a .padding() modifier, we create breathing room between the stack's content and the edges of the screen.

The default padding value is typically 16 points on all sides, which works well for most layouts.

**Note:** Modifiers are applied to views using dot notation and can be chained together.

Step 4

Introduce HStack

Now let's add a horizontal stack (HStack) inside our VStack. This creates a row of views within our vertical layout, demonstrating how stacks can be nested.

HStack arranges views from left to right (or right to left in RTL languages), making it perfect for creating rows of buttons, icons, or labels.

Step 5

Review Nested Structure

Take a moment to see the complete structure. We now have:

A VStack as the outer container (vertical layout)
Text views aligned to the leading edge
An HStack nested inside (horizontal layout)
Two images arranged side by side
Padding around the entire layout

This nesting pattern is fundamental to building complex SwiftUI interfaces. You can nest stacks as deeply as needed to achieve your desired layout.

Stack Best Practices

Learn when to use each stack type and common patterns

Step 1

Introducing ZStack

While VStack and HStack arrange views in lines, ZStack layers views on top of each other, with later views appearing in front of earlier ones.

ZStack is perfect for:

Overlaying text on images
Creating badges on icons
Building custom backgrounds
Layering effects

In this example, we're creating a background color with text on top.

Step 2

Spacer for Layout Control

A Spacer() is a flexible view that expands to fill available space. In a VStack, spacers push content apart vertically.

Here we've added spacers above and below our middle text, which centers it vertically in the available space. Spacers are essential for controlling how views distribute within a stack.

Step 3

Complete Layout Pattern

This final structure demonstrates a complete layout pattern:

Outer VStack - Provides vertical structure
Spacer - Pushes content from the top
Content VStack - Contains the main elements
Spacer - Pushes content from the bottom

This pattern creates a centered content area with equal spacing above and below, a common design requirement in iOS apps.

**Remember:** Start with simple stacks and build up complexity gradually. The key to mastering SwiftUI layout is understanding how VStack, HStack, and ZStack work together.

Create Your First VStack

swift
struct ContentView: View {
    var body: some View {
        VStack {
        }
    }
}
            Text("Welcome to SwiftUI")
            Text("Learn to build great apps")
        VStack(spacing: 20) {
        VStack(alignment: .leading, spacing: 20) {
        .padding()

            HStack {
                Image(systemName: "star.fill")
                Image(systemName: "star.fill")
            }
ZStack {
    Color.blue.opacity(0.3)
    Text("Layered Content")
}
        VStack {
            Spacer()
            Text("Centered Content")
            Spacer()
        }