Why lists present dynamic content in iOS Swift - Build It to Prove It

Build: Dynamic List Screen

This screen shows a list that updates dynamically when you add new items. It helps you understand why lists are good for showing changing content.

Target UI

-------------------------
| Dynamic List Screen    |
-------------------------
| + Add Item             |
|-----------------------|
| 1. Item 1             |
| 2. Item 2             |
| 3. Item 3             |
|                       |
-------------------------

Show a list of text items that can grow

Add a button labeled '+ Add Item' at the top

When the button is tapped, add a new item to the list

The list updates immediately to show the new item

Use SwiftUI List to present the items dynamically

Starter Code

iOS Swift

import SwiftUI

struct DynamicListScreen: View {
    @State private var items = ["Item 1", "Item 2", "Item 3"]

    var body: some View {
        VStack {
            Button(action: {
                // TODO: Add new item to the list
            }) {
                Text("+ Add Item")
                    .font(.headline)
                    .padding()
            }
            List {
                // TODO: Show items here
            }
        }
        .navigationTitle("Dynamic List Screen")
    }
}

struct DynamicListScreen_Previews: PreviewProvider {
    static var previews: some View {
        NavigationView {
            DynamicListScreen()
        }
    }
}

Task 1

Task 2

Solution

iOS Swift

import SwiftUI

struct DynamicListScreen: View {
    @State private var items = ["Item 1", "Item 2", "Item 3"]

    var body: some View {
        VStack {
            Button(action: {
                let newItem = "Item \(items.count + 1)"
                items.append(newItem)
            }) {
                Text("+ Add Item")
                    .font(.headline)
                    .padding()
            }
            List {
                ForEach(items, id: \.self) { item in
                    Text(item)
                }
            }
        }
        .navigationTitle("Dynamic List Screen")
    }
}

struct DynamicListScreen_Previews: PreviewProvider {
    static var previews: some View {
        NavigationView {
            DynamicListScreen()
        }
    }
}

This screen uses a SwiftUI List to show items from a dynamic array called items. The @State property wrapper lets the view update when the array changes.

The '+ Add Item' button adds a new string to the array. Because the array is marked with @State, SwiftUI automatically refreshes the list to show the new item. This shows why lists are great for dynamic content: they update automatically when the data changes.

Final Result

Completed Screen

-------------------------
| Dynamic List Screen    |
-------------------------
| + Add Item             |
|-----------------------|
| 1. Item 1             |
| 2. Item 2             |
| 3. Item 3             |
| 4. Item 4             |
|                       |
-------------------------

Tap '+ Add Item' button to add a new item at the bottom of the list

List updates immediately to show the new item

Stretch Goal

Add a feature to remove items by swiping left on a list row

💡 Hint

Use the .onDelete modifier on the List with a function to remove items from the array