4️⃣Layouts

Fall 2023 | Vin Bui

When we create apps, we don’t just care about creating our views — we also want to lay them out. In SwiftUI, there are three main ways to lay out our views:

1. HStack

2. VStack

3. ZStack

HStack

An HStack is a view that arranges its views in a horizontal line. For example, to lay out the text “Cornell” and “AppDev” horizontal, we can use the following code:

HStack {
    Text("Cornell")
    Text("AppDev")
}

HStack

VStack

A VStack is a view that arranges its views in a vertical line. For example, to lay out the text “Cornell” and “AppDev” vertically, we can use the following code:

VStack {
    Text("Cornell")
    Text("AppDev")
}

VStack

ZStack

A ZStack is a view that overlays its subviews, aligning them in both axes. For example, to place the text “AppDev” above a background color of red, we can use the following code:

ZStack {
    Color.red
    Text("AppDev")
}

ZStack

Spacers

A Spacer is a flexible view that expands along the major axis of its containing stack layout, or on both axes if not contained in a stack. For example, to place the text “Cornell” as far away from “AppDev” in an HStack, we can use the following code:

HStack {
    Text("Cornell")
    Spacer()
    Text("AppDev")
}

Spacer in an HStack

Other Views

Of course, there are other types of views we can use to lay out our views. I recommend reading the Apple Documentation for each one if you’re interested.

• LazyHStack

• LazyVStack

• List

• ScrollView

• LazyHGrid

• LazyVGrid

• Form

• Divider