LazyVStack and LazyHStack in iOS Swift - Mini App: Build & Ship

Build: Lazy Stacks Demo

This screen shows a vertical list and a horizontal list using LazyVStack and LazyHStack. It helps to display many items efficiently by loading views only when needed.

Target UI

-------------------------
| Lazy Stacks Demo       |
|-----------------------|
| Vertical List:         |
| 1. Item 1             |
| 2. Item 2             |
| 3. Item 3             |
| ...                   |
|                       |
| Horizontal List:       |
| [Item 1] [Item 2] ... |
-------------------------

Use LazyVStack inside a ScrollView for vertical list of 50 items labeled 'Item 1' to 'Item 50'.

Use LazyHStack inside a horizontal ScrollView for horizontal list of 20 items labeled 'Item 1' to 'Item 20'.

Each item should be a rounded rectangle with a light gray background and the item label centered.

Add padding around stacks for spacing.

The screen should have a title 'Lazy Stacks Demo' at the top.

Starter Code

iOS Swift

import SwiftUI

struct LazyStacksDemoView: View {
    var body: some View {
        VStack {
            Text("Lazy Stacks Demo")
                .font(.title)
                .padding()

            ScrollView {
                // TODO: Add LazyVStack here
            }

            ScrollView(.horizontal) {
                // TODO: Add LazyHStack here
            }
        }
        .padding()
    }
}

struct LazyStacksDemoView_Previews: PreviewProvider {
    static var previews: some View {
        LazyStacksDemoView()
    }
}

Task 1

Task 2

Task 3

Task 4

Solution

iOS Swift

import SwiftUI

struct LazyStacksDemoView: View {
    var body: some View {
        VStack {
            Text("Lazy Stacks Demo")
                .font(.title)
                .padding()

            ScrollView {
                LazyVStack(spacing: 10) {
                    ForEach(1...50, id: \.self) { i in
                        Text("Item \(i)")
                            .multilineTextAlignment(.center)
                            .frame(maxWidth: .infinity)
                            .padding()
                            .background(Color.gray.opacity(0.2))
                            .cornerRadius(8)
                    }
                }
                .padding()
            }

            ScrollView(.horizontal) {
                LazyHStack(spacing: 10) {
                    ForEach(1...20, id: \.self) { i in
                        Text("Item \(i)")
                            .multilineTextAlignment(.center)
                            .frame(width: 80, height: 50)
                            .padding()
                            .background(Color.gray.opacity(0.2))
                            .cornerRadius(8)
                    }
                }
                .padding()
            }
        }
        .padding()
    }
}

struct LazyStacksDemoView_Previews: PreviewProvider {
    static var previews: some View {
        LazyStacksDemoView()
    }
}

We use LazyVStack inside a vertical ScrollView to efficiently show 50 items vertically. Each item is a Text with padding and a light gray rounded rectangle background for a clean look.

Similarly, LazyHStack inside a horizontal ScrollView shows 20 items horizontally. Each item has fixed width and height to keep consistent size and uses the same styling.

Padding and spacing between items improve readability and touch targets. The title is styled with a larger font and padding at the top.

Final Result

Completed Screen

-------------------------
| Lazy Stacks Demo       |
|-----------------------|
| Vertical List:         |
| [Item 1]              |
| [Item 2]              |
| [Item 3]              |
| ...                   |
|                       |
| Horizontal List:       |
| [Item 1] [Item 2] ... |
-------------------------

User can scroll vertically through the 50 items in the LazyVStack.

User can scroll horizontally through the 20 items in the LazyHStack.

Items load smoothly as user scrolls because of lazy loading.

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, then apply background and text colors accordingly.