Categories
SwiftUI

Understand Stack Views in SwiftUI

There are three built-in stacking views in SwiftUI; VStack, HStack, and ZStack. All three stacks are of type View. Stacks have alignment and content parameters. VStack & HStack also have a spacing parameter. In SwiftUI, the last parameters can be omitted, the default alignment in the center and the spacing is dynamic when it is not specified.
Instead of writing the code as below :

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack (alignment: .center, spacing: 20, content: {
           // UI elements 
        }
        )
    }
}

You can write it in a simplified way as below:

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
           // UI elements 
        }
    }
}

VStackĀ 

VStack is a view that arranges its children in a vertical line. The example below is stacking three rounded rectangles vertically. A RoundedRectangle is a shape that conforms to a View type.

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            RoundedRectangle(cornerRadius: 20)
                .frame(width: 300, height: 200)
            
            RoundedRectangle(cornerRadius: 20)
                .frame(width: 300, height: 200)
            
            RoundedRectangle(cornerRadius: 20)
                .frame(width: 300, height: 200)
        }
    }
}
VStack example view

HStack

HStack is a view that arranges its children in a horizontal line. The example below is stacking three rounded rectangles horizontally.

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack {
            RoundedRectangle(cornerRadius: 20)
                .frame(width: 100, height: 200)
            
            RoundedRectangle(cornerRadius: 20)
                .frame(width: 100, height: 200)
            
            RoundedRectangle(cornerRadius: 20)
                .frame(width: 100, height: 200)
        }
    }
}
HStack example view

ZStack

ZStack is a view that overlays its children, aligning them in both axes. The example below is stacking a rounded rectangle shape and a text view.

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack  {
            RoundedRectangle(cornerRadius: 20)
                .frame(width: 250, height: 250)
                .foregroundColor(Color.blue.opacity(0.4))
            
            Text("ZStack View")
                .bold()
                .font(.system(size: 30))
        }
    }
}
ZStack example view

Stacks & Modifiers

All three stacks explained above are of type View. This allows us to use View’s modifiers. The modifiers will be applied to all the elements inside of a stack. In the example below, all the rounded rectangles will have a the stack’s foreground color modifier applied to them.

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack  {
            RoundedRectangle(cornerRadius: 20)
                .frame(width: 200, height: 200)
            
            RoundedRectangle(cornerRadius: 20)
                .frame(width: 200, height: 200)
            
            RoundedRectangle(cornerRadius: 20)
                .frame(width: 200, height: 200)
            
        }.foregroundColor(Color.red.opacity(0.4))
    }
}
Stacks & modifiers

Modifiers of elements inside of a stack view will override the stack view’s modifiers. The example below shows the first and second rounded rectangles’ foreground color modifier overriding the stack’s modifier.

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack  {
            RoundedRectangle(cornerRadius: 20)
                .frame(width: 200, height: 200)
                .foregroundColor(Color.blue.opacity(0.4))
            
            RoundedRectangle(cornerRadius: 20)
                .frame(width: 200, height: 200)
                .foregroundColor(Color.green.opacity(0.4))
            
            RoundedRectangle(cornerRadius: 20)
                .frame(width: 200, height: 200)
            
        }.foregroundColor(Color.red.opacity(0.4))
    }
}