Skip to content

SwiftUI: stacks and groups

FULL-STACK WEB DEVELOPMENT BOOTCAMP

2024 COHORT SIGNUPS END TOMORROW

No SwiftUI app, beside an Hello World, has just a view.

When you want to add more than one view, you need to add them to a stack.

There are 3 kinds of stacks:

Let’s go back to the Hello World app:

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello World")
    }
}

To add a second Text view we can’t do this:

struct ContentView: View {
    var body: some View {
        Text("Hello World")
        Text("Hello again!")
    }
}

but we have to embed those views into a stack.

Let’s try with VStack:

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello World")
            Text("Hello again!")
        }
    }
}

See? The views are aligned vertically, one after the other.

Here’s HStack:

And here’s ZStack, which puts items one in front of the other, and in this case generates a mess:

ZStack is useful, for example, to put a background image and some text over it. That’s the simplest use case you can think of.

In SwiftUI we organize all our UI using those 3 stacks.

We also use Group, a view that, similarly to stacks, can be used to group together multiple views, but contrary to stack views, it does not affect layout.

VStack {
    Group {
        Text("Hello World")
        Text("Hello again!")
    }
}

One use case that might come handy for groups, beside applying modifiers to child views as we’ll see next, is that views can only have 10 children. So you can use Group to group together up to 10 views into 1

Group and the stack views are views too, and so they have modifiers.

Sometimes modifiers affect the view they are applied to, like in this case:

Text("Hello World") 
.font(.largeTitle)

Sometimes however they are used to apply the same property to multiple views at the same time.

Like this:

VStack {
    Text("Hello World")
    Text("Hello again!")
}
.font(.largeTitle)

See? By applying the font() modifier to the VStack, the .largeTitle font was applied to both Text views.

This is valid for modifiers that we call environment modifiers. Not every modifier can work this way, but some do, like in the above example.

→ Get my Swift Handbook
  • Learn modern web development in my BOOTCAMP (SIGNUP END TOMORROW FEB 20, 2024)
  • THE VALLEY OF CODE (+ PRO), your web development manual
  • I wrote 15+ coding BOOKS, all available in THE VALLEY OF CODE PRO
  • Indie solopreneur internet business masterclass SOLO LAB (summer 2024)