VStack, HStack, ZStack in iOS Swift - Mini App: Build & Ship

Build: Stack Layout Demo

This screen shows how to arrange views vertically, horizontally, and layered using VStack, HStack, and ZStack in SwiftUI.

Target UI

-------------------------
| VStack, HStack, ZStack |
|-----------------------|
| VStack:               |
|  [Red Box]            |
|  [Green Box]          |
|  [Blue Box]           |
|                       |
| HStack:               |
|  [Red Box][Green Box][Blue Box] |
|                       |
| ZStack:               |
|  [Blue Box behind]    |
|  [Green Box middle]   |
|  [Red Box front]      |
-------------------------

Use VStack to stack three colored rectangles vertically with spacing.

Use HStack to stack the same three rectangles horizontally with spacing.

Use ZStack to layer the three rectangles on top of each other with the red box in front.

Each colored rectangle should be 100x100 points.

Add labels above each stack: 'VStack:', 'HStack:', 'ZStack:'.

Use SwiftUI and make the layout scrollable if needed.

Starter Code

iOS Swift

import SwiftUI

struct StackLayoutDemo: View {
    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 20) {
                // TODO: Add VStack section here

                // TODO: Add HStack section here

                // TODO: Add ZStack section here
            }
            .padding()
        }
    }
}

struct StackLayoutDemo_Previews: PreviewProvider {
    static var previews: some View {
        StackLayoutDemo()
    }
}

Task 1

Task 2

Task 3

Solution

iOS Swift

import SwiftUI

struct StackLayoutDemo: View {
    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 20) {
                // VStack Section
                Text("VStack:")
                    .font(.headline)
                VStack(spacing: 10) {
                    Rectangle().fill(Color.red).frame(width: 100, height: 100)
                    Rectangle().fill(Color.green).frame(width: 100, height: 100)
                    Rectangle().fill(Color.blue).frame(width: 100, height: 100)
                }

                // HStack Section
                Text("HStack:")
                    .font(.headline)
                HStack(spacing: 10) {
                    Rectangle().fill(Color.red).frame(width: 100, height: 100)
                    Rectangle().fill(Color.green).frame(width: 100, height: 100)
                    Rectangle().fill(Color.blue).frame(width: 100, height: 100)
                }

                // ZStack Section
                Text("ZStack:")
                    .font(.headline)
                ZStack {
                    Rectangle().fill(Color.blue).frame(width: 100, height: 100)
                    Rectangle().fill(Color.green).frame(width: 100, height: 100)
                    Rectangle().fill(Color.red).frame(width: 100, height: 100)
                }
            }
            .padding()
        }
    }
}

struct StackLayoutDemo_Previews: PreviewProvider {
    static var previews: some View {
        StackLayoutDemo()
    }
}

This screen uses three main SwiftUI stack views to arrange colored rectangles:

• VStack stacks the red, green, and blue rectangles vertically with spacing between them.
• HStack stacks the same rectangles horizontally side by side with spacing.
• ZStack layers the rectangles on top of each other, with the red rectangle in front, green in the middle, and blue behind.

Each rectangle is 100x100 points for clear visibility. Labels above each stack describe the layout type. The whole content is inside a ScrollView to allow scrolling if the screen is small.

Final Result

Completed Screen

-------------------------
| VStack, HStack, ZStack |
|-----------------------|
| VStack:               |
|  [Red Box]            |
|  [Green Box]          |
|  [Blue Box]           |
|                       |
| HStack:               |
|  [Red Box][Green Box][Blue Box] |
|                       |
| ZStack:               |
|  [Blue Box behind]    |
|  [Green Box middle]   |
|  [Red Box front]      |
-------------------------

User can scroll vertically if the screen height is small.

The colored boxes are static and show the stacking order clearly.

Stretch Goal

Add a toggle button to switch between light and dark mode for the screen.

💡 Hint

Use @Environment(\.colorScheme) and a @State variable to toggle colorScheme override in SwiftUI.

Practice

1. Which SwiftUI stack arranges views vertically, one on top of the other?
VStack, HStack, or ZStack?

easy

A. ZStack

B. VStack

C. HStack

D. StackView

Solution

1. Step 1: Understand VStack behavior

   VStack arranges child views vertically, stacking them from top to bottom.

2. Step 2: Compare with other stacks

   HStack arranges views horizontally, ZStack layers views on top of each other.

3. Final Answer:

   VStack -> Option B

4. Quick Check:

   Vertical arrangement = VStack [OK]

Hint: Remember V for vertical stacking [OK]

Common Mistakes:

• Confusing HStack with VStack
• Thinking ZStack arranges views vertically
• Assuming StackView is a SwiftUI stack

2. Which of the following is the correct syntax to create a horizontal stack with two Text views in SwiftUI?

?

easy

A. HStack -> Text("Hello") + Text("World")

B. HStack(Text("Hello"), Text("World"))

C. HStack[Text("Hello"), Text("World")]

D. HStack { Text("Hello") Text("World") }

Solution

1. Step 1: Recall SwiftUI stack syntax

   Stacks use braces { } to group child views, separated by spaces or newlines.

2. Step 2: Identify correct syntax

   HStack { Text("Hello") Text("World") } uses braces and places Text views inside correctly. Others use invalid syntax.

3. Final Answer:

   HStack { Text("Hello") Text("World") } -> Option D

4. Quick Check:

   Use braces for stacks [OK]

Hint: Stacks use braces { } to group views [OK]

Common Mistakes:

• Using parentheses instead of braces
• Using brackets instead of braces
• Trying to use operators to combine views

3. What will be the visual arrangement of the texts when this SwiftUI code runs?

ZStack {
  Text("Bottom")
  Text("Top")
}

medium

A. Texts appear side by side horizontally

B. "Bottom" text appears above "Top" text

C. "Top" text appears above "Bottom" text

D. Texts appear stacked vertically

Solution

1. Step 1: Understand ZStack layering order

   ZStack layers views in order, last view is on top visually.

2. Step 2: Apply to given code

   "Bottom" is added first, "Top" second, so "Top" appears above "Bottom".

3. Final Answer:

   "Top" text appears above "Bottom" text -> Option C

4. Quick Check:

   ZStack last view is top layer [OK]

Hint: Last view in ZStack is on top [OK]

Common Mistakes:

• Assuming first view is on top
• Thinking ZStack arranges views horizontally
• Confusing ZStack with VStack or HStack

4. Identify the error in this SwiftUI code snippet:

HStack {
  Text("One")
  VStack
  Text("Two")
}

medium

A. Missing braces after VStack declaration

B. Text views cannot be inside HStack

C. HStack requires parentheses instead of braces

D. VStack cannot be nested inside HStack

Solution

1. Step 1: Check VStack usage

   VStack is a view container and requires braces { } to enclose child views.

2. Step 2: Identify missing braces

   Code shows VStack without braces, causing syntax error.

3. Final Answer:

   Missing braces after VStack declaration -> Option A

4. Quick Check:

   Containers need braces for children [OK]

Hint: Always add braces after VStack or HStack [OK]

Common Mistakes:

• Omitting braces for stack containers
• Thinking Text can't be inside HStack
• Using parentheses instead of braces for stacks

5. You want to create a SwiftUI view where three colored squares overlap each other with red on bottom, green in middle, and blue on top. Which stack and order of views achieves this?

hard

A. ZStack { Color.red Color.green Color.blue } with Color.blue last

B. VStack { Color.red Color.green Color.blue } with Color.red last

C. HStack { Color.blue Color.green Color.red } with Color.red last

D. ZStack { Color.blue Color.green Color.red } with Color.red last

Solution

1. Step 1: Choose stack for overlapping views

   ZStack layers views on top of each other, perfect for overlapping.

2. Step 2: Order views for correct layering

   In ZStack, last view is top layer, so Color.blue last puts blue on top, red first puts red at bottom.

3. Final Answer:

   ZStack { Color.red Color.green Color.blue } with Color.blue last -> Option A

4. Quick Check:

   ZStack layering order = last view on top [OK]

Hint: Use ZStack; last view is top layer [OK]

Common Mistakes:

• Using VStack or HStack for overlapping
• Reversing order of colors in ZStack
• Thinking first view is top layer in ZStack