Layouts

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:

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:

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:

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:

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