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.