SwiftUI ForEach, Lists and Forms

Use ForEach to generate repeated views

SwiftUI's ForEach lets you iterate over collections and create a corresponding view for each item. It is useful for rows, grids, boards, menus, and other dynamic interfaces without manually repeating view code.

struct ContentView: View {
    var body: some View {
        VStack(spacing: 0) {
            ForEach(0..<8, id: \.self) { row in
                HStack(spacing: 0) {
                    ForEach(0..<8, id: \.self) { column in
                        Rectangle()
                            .fill((row + column).isMultiple(of: 2) ? .white : .black)
                    }
                }
            }
        }
        .aspectRatio(1, contentMode: .fit)
    }
}

Nested ForEach loops make a checkers-style board straightforward: one loop creates rows while the inner loop creates the cells in each row.

Build a SwiftUI List from a dictionary

ForEach can also iterate over dictionary data. In this example, player names are used as keys and their ranking values are displayed in a SwiftUI List.

struct ContentView: View {
    let players: [String: Int] = [
        "John": 4,
        "Sarah": 1,
        "David": 3,
        "Emma": 2
    ]

    var body: some View {
        List {
            ForEach(Array(players.keys), id: \.self) { name in
                HStack {
                    Text(name)
                    Spacer()
                    Text("Rank: \(players[name] ?? 0)").bold()
                }
            }
        }
    }
}

Sort dictionary values directly inside ForEach

You do not need a separate pre-sorted array. The dictionary can be sorted by rank as it is passed into ForEach, while the dictionary key acts as the unique identifier.

List {
    ForEach(
        players.sorted(by: { $0.value < $1.value }),
        id: \.key
    ) { name, rank in
        HStack {
            Text(name)
            Spacer()
            Text("Rank: \(rank)").bold()
        }
    }
}

Add new players with a SwiftUI Form

A SwiftUI Form is a convenient container for data-entry controls. Here it adds a text field below the sorted list, then inserts a new player with a random rank when the user submits the field.

struct ContentView: View {
    @State var players: [String: Int] = [String: Int]()
    @State var playerName: String = ""

    var body: some View {
        VStack(spacing: 0) {
            List {
                ForEach(players.sorted(by: { $0.value < $1.value }), id: \.key) { name, rank in
                    HStack {
                        Text(name)
                        Spacer()
                        Text("Rank: \(rank)").bold()
                    }
                }
            }

            Form {
                TextField("Player name...", text: $playerName)
            }
            .onSubmit {
                players[playerName] = Int.random(in: 1...20)
                playerName = ""
            }
            .background(Color.accentColor)
            .scrollContentBackground(.hidden)
            .frame(height: 100)
        }
    }
}

Combining ForEach, List, and Form gives you a compact pattern for displaying changing data and letting users add new values without building a large amount of interface code.