Listen und ForEach

Das Problem: Daten von beliebiger Länge

Bisher hattest du immer eine feste Anzahl von Views: drei Kontaktzeilen, vier Kaffeegrößen. Echte Apps zeigen aber Daten, deren Menge du beim Programmieren nicht kennst: Nachrichten, Kontakte, Einkäufe, Aufgaben. Mal sind es zwei, mal zweitausend.

Schreibst du jede Zeile von Hand, ist das unmöglich. Du brauchst eine Möglichkeit zu sagen: „Zeig für jedes Element in diesem Array eine Zeile.“

Die einfachste Liste

List {
    Text("Äpfel")
    Text("Brot")
    Text("Milch")
}

List sieht aus wie ein Form aus der letzten Lektion. Der Unterschied liegt im Zweck: List ist für Daten, also viele gleichartige Einträge.

ForEach: Eine View pro Element

Jetzt mit einem Array:

struct ShoppingList: View {
    let items = ["Äpfel", "Brot", "Milch", "Käse", "Kaffee"]

    var body: some View {
        List {
            ForEach(items, id: \.self) { item in
                Text(item)
            }
        }
    }
}

ForEach erzeugt für jedes Element des Arrays eine View. Die Closure bekommt das Element und beschreibt, wie seine Zeile aussieht. Kommt ein sechstes Element dazu, erscheint automatisch eine sechste Zeile.

Was bedeutet id: \.self?

SwiftUI muss jede Zeile eindeutig erkennen können. Warum? Wird ein Element gelöscht oder verschoben, muss SwiftUI wissen, welche Zeile verschwindet, um sie richtig zu animieren und ihren Zustand nicht zu verwechseln.

Mit id: sagst du, woran man ein Element erkennt. \.self heißt: „am Element selbst“, hier also am Text. Das funktioniert, solange jeder Text nur einmal vorkommt.

\.self ist ein sogenannter Key Path, ein Verweis auf eine Eigenschaft. \.name würde auf die Eigenschaft name verweisen. Mehr dazu in der nächsten Lektion.

Die Kurzform

Bei einer Liste, die nur aus ForEach besteht, kannst du das Array direkt an List übergeben:

List(items, id: \.self) { item in
    Text(item)
}

Das ist dasselbe, nur kürzer. Die lange Form mit ForEach brauchst du, sobald die Liste mehr enthält, etwa Abschnitte oder feste Zeilen.

Bereiche

ForEach funktioniert auch mit Zahlenbereichen:

ForEach(1...5, id: \.self) { number in
    Text("Zeile \(number)")
}

Bei halboffenen Bereichen wie 0..<5 darfst du id: sogar weglassen: ForEach(0..<5) { ... }.

ForEach ist keine Schleife

ForEach sieht aus wie eine for-Schleife aus Lektion 1.5, ist aber etwas anderes:

var body: some View {
    VStack {
        for item in items {       // ❌ geht nicht in body
            Text(item)
        }
    }
}

In body steht eine Beschreibung, keine Befehle (Lektion 2.1). Deshalb gibt es dort ForEach statt for.

Eigene Zeilen gestalten

Die Zeilen einer Liste können beliebige Views sein. Mit Structs aus Stufe 1 wird es richtig praktisch:

struct Contact {
    let name: String
    let phone: String
    let isFavorite: Bool
}

struct ContactList: View {
    let contacts = [
        Contact(name: "Anna Berger", phone: "+43 664 1234567", isFavorite: true),
        Contact(name: "Ben Huber", phone: "+43 676 7654321", isFavorite: false),
        Contact(name: "Clara Steiner", phone: "+43 699 1112223", isFavorite: true)
    ]

    var body: some View {
        List(contacts, id: \.name) { contact in
            HStack {
                Image(systemName: "person.circle.fill")
                    .font(.title)
                    .foregroundStyle(.blue)

                VStack(alignment: .leading) {
                    Text(contact.name)
                        .font(.headline)
                    Text(contact.phone)
                        .font(.subheadline)
                        .foregroundStyle(.secondary)
                }

                Spacer()

                if contact.isFavorite {
                    Image(systemName: "star.fill")
                        .foregroundStyle(.yellow)
                }
            }
        }
    }
}

Hier verwenden wir id: \.name: Jeder Kontakt wird an seinem Namen erkannt. Das ist ein Kompromiss. Zwei Personen mit gleichem Namen wären ein Problem. Auch das löst die nächste Lektion.

Abschnitte

Wie in Formularen gliedern Sections eine Liste:

List {
    Section("Obst & Gemüse") {
        ForEach(produce, id: \.self) { item in
            Text(item)
        }
    }
    Section("Milchprodukte") {
        ForEach(dairy, id: \.self) { item in
            Text(item)
        }
    }
}

Und weil eine Liste eine ganz normale Beschreibung ist, kannst du feste Zeilen und dynamische mischen:

List {
    Section {
        Label("Alle Kontakte", systemImage: "person.2")
    }
    Section("Favoriten") {
        ForEach(favorites, id: \.self) { name in
            Text(name)
        }
    }
}

Listenstile

List { ... }
    .listStyle(.plain)

Weitere nützliche Modifier:

List { ... }
    .listRowSeparator(.hidden)          // an einer Zeile: Trennlinie ausblenden
    .listRowBackground(Color.yellow)    // an einer Zeile: eigener Hintergrund
    .scrollContentBackground(.hidden)   // an der Liste: grauen Hintergrund entfernen

Leere Listen

Was zeigt eine Liste ohne Einträge? Nichts, nur eine graue Fläche. Das verwirrt Nutzer. Besser:

var body: some View {
    if items.isEmpty {
        ContentUnavailableView(
            "Keine Einträge",
            systemImage: "cart",
            description: Text("Füge deinen ersten Artikel hinzu.")
        )
    } else {
        List(items, id: \.self) { item in
            Text(item)
        }
    }
}

ContentUnavailableView zeigt ein großes Symbol, einen Titel und eine Beschreibung, im Stil der Systemapps. Es gibt sogar eine fertige Variante für leere Suchergebnisse: ContentUnavailableView.search.

Listen mit Zustand

Bisher waren die Daten Konstanten. Mit @State (Lektion 2.9) kann sich die Liste ändern:

struct TaskList: View {
    @State private var tasks = ["Einkaufen", "Sport"]
    @State private var newTask = ""

    var body: some View {
        List {
            Section {
                HStack {
                    TextField("Neue Aufgabe", text: $newTask)
                    Button("Hinzufügen") {
                        tasks.append(newTask)
                        newTask = ""
                    }
                    .disabled(newTask.isEmpty)
                }
            }
            Section("Aufgaben") {
                ForEach(tasks, id: \.self) { task in
                    Text(task)
                }
            }
        }
    }
}

Tippst du eine Aufgabe ein und drückst „Hinzufügen“, wird sie an das Array angehängt, und die Liste zeigt sofort eine neue Zeile. Du hast nirgends gesagt „füge eine Zeile ein“. Du hast nur die Daten geändert (UI = f(State)).

Bindings für jede Zeile

Soll jede Zeile ihr Element ändern können, etwa über einen Toggle, gibt es eine besondere Schreibweise:

struct Todo {
    var title: String
    var isDone = false
}

@State private var todos = [Todo(title: "Einkaufen"), Todo(title: "Sport")]

List {
    ForEach($todos, id: \.title) { $todo in
        Toggle(todo.title, isOn: $todo.isDone)
    }
}

ForEach($todos ...) mit $ liefert für jedes Element ein Binding (Lektion 2.10). In der Closure heißt der Parameter dann $todo: Mit todo liest du, mit $todo.isDone bekommst du die Verbindung für den Toggle. So ändert jeder Schalter direkt das richtige Element im Array.

Typische Fehler

for statt ForEach

In body heißt es ForEach, nicht for.

id fehlt

ForEach(items) { item in
    Text(item)
}

ForEach muss wissen, wie es Elemente unterscheidet. Gib id: \.self an oder mach den Typ Identifiable (nächste Lektion).

Doppelte IDs

Zwei Elemente haben dieselbe Kennung. Mach die Kennung eindeutig.

Liste in einer ScrollView

Wie beim Form: Eine List scrollt selbst. In einer ScrollView kann sie auf null Höhe schrumpfen.

FAQ

Übungen

struct CityList: View {
    let cities = ["Wien", "Graz", "Linz", "Salzburg", "Innsbruck"]

    var body: some View {
        List(cities, id: \.self) { city in
            Label(city, systemImage: "building.2")
        }
    }
}

struct CountryList: View {
    let data = [
        "Europa": ["Österreich", "Italien", "Frankreich"],
        "Asien": ["Japan", "Indien"],
        "Afrika": ["Kenia", "Ghana", "Marokko"]
    ]

    var body: some View {
        List {
            ForEach(data.keys.sorted(), id: \.self) { continent in
                Section(continent) {
                    ForEach(data[continent, default: []], id: \.self) { country in
                        Text(country)
                    }
                }
            }
        }
    }
}

Zusammenfassung

• List zeigt Daten als scrollbare Liste und erzeugt nur sichtbare Zeilen.
• ForEach erzeugt eine View pro Element. Es ist eine View, keine Schleife.
• id: sagt, woran Elemente erkannt werden. \.self nur bei eindeutigen Werten.
• Section gliedert Listen, feste und dynamische Zeilen lassen sich mischen.
• .listStyle wählt das Aussehen. ContentUnavailableView füllt leere Listen.
• ForEach($items) { $item in ... } liefert für jede Zeile ein Binding.

Spickzettel

List(items, id: \.self) { item in Text(item) }

List {
    Section("Titel") {
        ForEach(items, id: \.self) { item in Text(item) }
    }
}
.listStyle(.plain)

ForEach($todos, id: \.title) { $todo in
    Toggle(todo.title, isOn: $todo.isDone)
}

ContentUnavailableView("Leer", systemImage: "tray", description: Text("…"))