SwiftUI Tutorial: Working With Stacks — VStack, HStack, and ZStack
A good user interface requires an organized layout of views
Using stacks in SwiftUI allows you to easily layout your apps to build complex user interfaces. This is similar to stack views in UIKit without the complexity of its auto layout for building an app that fits all screen sizes. SwiftUI eliminated the complicated auto-layout of UIKit, by simplifying everything on stacks.
There are 3 different types of SwiftUI stacks that you can use and combine. Depending on how you wanted to design your app’s user interface, below are the options:
ZStack
HStack
VStack
In this tutorial, you will learn how different stack works. We will also create a complex user interface as shown in figure 1.
Before we proceed further, create a new project or open an existing one that you use for practice. Follow this guide if you need a step-by-step process on how to do it.
ZStack
ZStack
organizes the views on top of one another. This is useful for creating overlapping contents, like placing a text on top of an image like this:
import SwiftUI
struct ContentView: View {
var…