SwiftUI Tutorial: Working With Stacks — VStack, HStack, and ZStack

A good user interface requires an organized layout of views

Arc Sosangyo
Better Programming

SwiftUI ZStack, VStack, HStack, nested stacks demo
Figure 1.

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

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

No responses yet

What are your thoughts?