Refer to Project Weather.

image.png

Vertical stack is a simple vertical container

Horizontal stack is a simple horizontal container

Stacks do not position views manually. They arrange views based on available space, alignment, and the size of their children.

image.png

Z Stack is like the 3rd dimension where us can layer up multiple V stacks

ZStack layers views on top of each other. The first view is rendered at the back, and the last view appears on top.

Views Limit in Stacks

ANY SwiftUI container (ZStack, VStack, HStack, etc.)
can only have 10 direct children, nested views don't count

1. Order of code matters

So basically the order of code matters a lot, let’s take into consideration these two examples.

  1. Since we had decided the frames later the background didn’t apply to it cause at that time the frames were something else when it was executing.
VStack {
    Text("Cupertino, CA")
        .font(.system(size: 32, weight: .medium, design: .default))
        .foregroundColor(.white)
        .background(.red)
        .frame(width: 200, height: 200)
}

image.png

  1. We have to apply frame first if we want to fill that with the background color
VStack {
    Text("Cupertino, CA")
        .font(.system(size: 32, weight: .medium, design: .default))
        .frame(width: 200, height: 200)
        .foregroundColor(.white)
        .background(.red)
}

image.png