Stacks In SwiftUI

Stacks in SwiftUI are the basic views and I think they are more common in use than in UIKit.

There are three different stacks, each of them position views inside differently.

Remember about the limit of 10 subviews in a stack or in another view.

HStack

Views inside HStack are set horizontally, side by side.

var body: some View {
    
HStack {
        
Image(“clouds”)
        .
resizable()
        .
frame(width: 200, height: 200)
        
Image(“sydney”)
        .
resizable()
        .
frame(width: 200, height: 200)
    }
}

Result:

VStack

Views inside VStack are set vertically, one by one.

var body: some View {
    VStack {
        Image(“clouds”)
        .resizable()
        .frame(width: 200, height: 200)
        Image(“sydney”)
        .resizable()
        .frame(width: 200, height: 200)
    }
}

Result:

ZStack

Views inside ZStack are set one above the other. To see them, the second image is moved by 20 units to the right.

var body: some View {
    
ZStack {
        
Image(“clouds”)
        .
resizable()
        .
frame(width: 200, height: 200)
        
Image(“sydney”)
        .
resizable()
        .
frame(width: 200, height: 200)
        .
offset(x: 20, y: 0)
    }
}

Result: