ScrollView in iOS Swift - Mini App: Build & Ship

Build: Simple ScrollView Screen

This screen shows a vertical list of colored boxes inside a scrollable area. The user can scroll up and down to see all boxes.

Target UI

---------------------
| Simple ScrollView  |
|-------------------|
| [Red Box]         |
| [Green Box]       |
| [Blue Box]        |
| [Yellow Box]      |
| [Purple Box]      |
| [Orange Box]      |
|                   |
|                   |
|                   |
---------------------

Use a ScrollView to allow vertical scrolling

Inside the ScrollView, add six colored rectangular views stacked vertically

Each colored box should have a fixed height of 150 points and full screen width

Add some spacing (10 points) between each colored box

The screen should have a navigation title 'Simple ScrollView'

Starter Code

iOS Swift

import SwiftUI

struct ScrollViewScreen: View {
    var body: some View {
        NavigationView {
            // TODO: Add ScrollView with colored boxes here
            Text("Add your ScrollView here")
                .navigationTitle("Simple ScrollView")
        }
    }
}

struct ScrollViewScreen_Previews: PreviewProvider {
    static var previews: some View {
        ScrollViewScreen()
    }
}

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

iOS Swift

import SwiftUI

struct ScrollViewScreen: View {
    var body: some View {
        NavigationView {
            ScrollView {
                VStack(spacing: 10) {
                    Rectangle().fill(Color.red).frame(height: 150).frame(maxWidth: .infinity)
                    Rectangle().fill(Color.green).frame(height: 150).frame(maxWidth: .infinity)
                    Rectangle().fill(Color.blue).frame(height: 150).frame(maxWidth: .infinity)
                    Rectangle().fill(Color.yellow).frame(height: 150).frame(maxWidth: .infinity)
                    Rectangle().fill(Color.purple).frame(height: 150).frame(maxWidth: .infinity)
                    Rectangle().fill(Color.orange).frame(height: 150).frame(maxWidth: .infinity)
                }
                .padding()
            }
            .navigationTitle("Simple ScrollView")
        }
    }
}

struct ScrollViewScreen_Previews: PreviewProvider {
    static var previews: some View {
        ScrollViewScreen()
    }
}

We use ScrollView to make the content vertically scrollable. Inside it, a VStack stacks six colored rectangles vertically with 10 points spacing. Each rectangle has a fixed height of 150 points and stretches horizontally to fill the screen width using frame(maxWidth: .infinity). Padding is added around the stack for nice spacing from screen edges. The navigation title is set on the NavigationView to show "Simple ScrollView" at the top.

Final Result

Completed Screen

---------------------
| Simple ScrollView  |
|-------------------|
| [Red Box]         |
|                   |
| [Green Box]       |
|                   |
| [Blue Box]        |
|                   |
| [Yellow Box]      |
|                   |
| [Purple Box]      |
|                   |
| [Orange Box]      |
|                   |
|                   |
|                   |
---------------------

User can swipe up and down to scroll through all six colored boxes

The navigation bar title 'Simple ScrollView' stays fixed at the top

Stretch Goal

Add a button in the navigation bar that scrolls the ScrollView back to the top when tapped.

💡 Hint

Use ScrollViewReader with an ID on the first colored box and a button that calls scrollTo on it.