SwiftUI Stacks: VStack, HStack, and ZStack Combine and Create Complex Screens

SUBSCRIBE TO THE BLOG

It is common to add many elements to the UI when developing an app. Some of them need to be displayed vertically, horizontally or even overlapping. SwiftUI offers us many different methods of accomplishing this, but the most common one is by using Stacks. 

In this article, we are going to look at what a Stack is and its three types: VStack, HStack, and ZStack. You will see some simple examples that show the behavior of each of them and the ways to combine them to create complex screens. Finally, we’ll break down a performance comparison between Lazy and not lazy stacks.

What is a SwiftUI Stack?

A Stack in SwiftUI is equivalent to UIStackView in UIKit. It can be defined as a static collection that allows you to include, combine, order, or group a series of user interface elements in specific directions, guaranteeing that the application does not lose its form when it is used on different devices.

An important detail about stacks is that they can only pile 10 subviews, otherwise the message “Extra argument in call” will be displayed on your editor.

The images below present a graphical description of the three available types of Stacks: 

VStack, HStack, ZStack diagram

VStack: 

VStack shows its children elements as a top-to-bottom list. This is the most typically used stack. In fact, this is the default view that the body returns.

In the example below, you will see a VStack with two views: an Image() and a Text():

VStack Image and Text View

This is the result:

As you can see, the structure is aligned in a vertical way: the Image() is above the Text().

Image above text in VStack

HStack 

HStack is used to group the views left-to-right. 

In the example below, you will see an HStack with two views: an Image() and a Text():

HStack with Image and Text View

This is the result:

Image and Text next to eachother in HStack

As you can see, the structure is aligned in a horizontal way: the Image() is next to the Text().

ZStack 

ZStack shows its children back-to-front, allowing the views to be overlapped.

In the example below, you will see a ZStack with two views: an Image() and a Text(): 

ZStack Image and Text View

This is the result:

As you can see, the structure is in an overlapping format. So, in this case, the Text() overlaps the Image().

Text on top of Image with ZStack

Combining Stacks 

Most applications have to show a variety of content that needs to be distributed on the screen. A good way to achieve this is using a combination of Stacks.

In the example below, you will see a combination of VStack, HStack, and ZStack. Each of them have views inside, like Text() and Image(). 

Combination of VStack, HStack, and ZStack with Image and Text Views

This is the result:

As you can see, VStack arranges the Text(), HStack, and Zstack as a top-to-bottom list. On the other hand, HStack groups two Text() views, “Agile” and “Unstoppable,” in left-to-right order. Last but not least, the ZStack positions its views, Image() and Text(), one over the other.

VStack arranges the Text(), HStack, and Zstack as a top-to-bottom list. HStack groups two Text() views, “Agile” and “Unstoppable,” in left-to-right order. ZStack positions its views, Image() and Text(), one over the other.

Some important details to know about Stacks is that they provide some custom properties, specifically alignment and spacing. The spacing allows the elements of the view to be separated from each other by a specific value (this applies just for HStack and VStack, wherein the alignment arranges the inner views in a specific position).

For example, if we change the definition of VStack to be:

New VStack definition

This is the result:

Space between the elements and their alignment has changed. Stacked to the left side with a spacing of 40.

As you can see, the space between the elements has changed, as well as their alignment. Now they are stacked to the left side with a spacing of 40.

Lazy Stacks

We just reviewed the standard Stacks that SwiftUI has, and now we want to know the behavior of these related to the performance. It is worth mentioning that VStack, HStack, and ZStack all load the entire content at once, no matter if the inner views are on-screen or off-screen.

Think for a moment, if we want to present our content inside of a ScrollView, what could be the performance of our application using the standard Stacks? Well, here is where the lazy Stacks come into play.

The term “lazy” comes from the common lazy loading pattern that consists of initializing an object only to the point that it is needed. SwiftUI uses the same concept and applies it to the views so that they can be improved in a number of ways, especially performance.

The lazy Stacks are alternative types of Stacks that SwiftUI provides (available since iOS 14) and come in two different types: LazyVStack and LazyHStack. This means that they don’t apply to ZStack. The main advantage, as mentioned before, is that they can be loaded on demand, making the lazy stacks the typical go-to type of views when using dynamic content that needs to be scrolled.

Let’s clarify this with an example: Say that we need to display not only one Stack with inner views as we did before, but instead want to load a thousand of them. In this case, we turn the VStack into a LazyVStack and put it inside a ScrollView, giving us the advantage of loading the views to the memory when they are brought on-screen:

This is the code for thousand of stacks. In this case, we turn the VStack into a LazyVStack and put it inside a ScrollView, giving us the advantage of loading the views to the memory when they are brought on-screen:

This is the result: 

Result of thousand stacks

At this point, there are only four loaded VStacks while the other 996 haven’t loaded yet.

Performance Comparison 

In the image below, we compare the performance of memory usage between a LazyVStack and a VStack:

 LazyVStack           

 Memory usage for a LazyVStack

    VStack

Memory usage for a VStack

For VStack, we just replaced LazyVStack(spacing: 16) {..} from the last code snippet to use a VStack VStack(spacing: 16) {…}. This change caused the memory to go up 48.3 MB because everything was cached from the application boot up.

In Conclusion 

Stacks in SwiftUI are ideal for arranging a collection of views in different directions and can be combined to create complex screens. The properties alignment and spacing help us to go one step further and customize our screens depending on our needs.

The lazy Stacks are an improvement from the non-lazy stacks, but this doesn’t mean that they exclude each other. Instead, they can be combined, and it’s important to understand which scenarios we should use each one in.

Resources 

VStack

HStack

ZStack 

LazyVStack

LazyHStack 

 

New call-to-action

Angélica Ulate

Angélica is a former primary school teacher who gave herself the opportunity to discover the software industry. Since then, she has been working as an iOS developer at Gorilla Logic and loves designing front-end applications. She likes to spend her free time cooking, walking with her family, and solving puzzles.

Related Articles

Ready to be Unstoppable?

Partner with Gorilla Logic, and you can be.