Identifiable, Löschen und Verschieben

Das Problem: Woran erkennt man einen Eintrag?

In der letzten Lektion haben wir Elemente mit id: \.self oder id: \.name gekennzeichnet. Beides hatte einen Haken:

• Zwei Einkäufe namens „Brot“ hätten dieselbe Kennung.
• Zwei Kontakte namens „Anna Berger“ ebenfalls.
• Und ändert jemand den Namen eines Kontakts, ändert sich auch seine Kennung. Für SwiftUI ist das dann ein neuer Eintrag.

Stell dir vor, du wischst über die Zeile des zweiten „Brot“, um sie zu löschen, und SwiftUI löscht die erste. Oder eine Animation springt wild durch die Liste. Genau solche Fehler entstehen durch unklare Kennungen.

Was wir brauchen: eine eigene Kennung für jeden Eintrag, die garantiert einmalig ist und sich nie ändert. Wie eine Ausweisnummer.

Identifiable

Du kennst das Protokoll schon aus Lektion 1.15:

struct ShoppingItem: Identifiable {
    let id = UUID()
    var name: String
    var isBought = false
}

• Identifiable verlangt genau eine Eigenschaft: id.
• UUID() erzeugt eine zufällige, weltweit einmalige Kennung, etwa E621E1F8-C36C-495A-93FC-0C247A3E6E5F. Die Wahrscheinlichkeit, dass zwei gleich sind, ist praktisch null.
• let sorgt dafür, dass sich die id nie ändert.

Jetzt kann ForEach die Elemente ohne id:-Angabe unterscheiden:

struct ShoppingList: View {
    @State private var items = [
        ShoppingItem(name: "Brot"),
        ShoppingItem(name: "Milch"),
        ShoppingItem(name: "Brot")
    ]

    var body: some View {
        List(items) { item in
            Text(item.name)
        }
    }
}

Zweimal „Brot“ ist kein Problem mehr: Jedes hat eine eigene id.

Löschen per Wischgeste

Für das Löschen gibt es einen Modifier an ForEach:

List {
    ForEach(items) { item in
        Text(item.name)
    }
    .onDelete { indexSet in
        items.remove(atOffsets: indexSet)
    }
}

Jetzt kann der Nutzer eine Zeile nach links wischen, und es erscheint ein roter „Löschen“-Knopf. Wischt er weiter oder tippt darauf, verschwindet die Zeile.

Was passiert hier?

• .onDelete steht am ForEach, nicht an der List. Nur Zeilen aus einem ForEach können gelöscht werden.
• Die Closure bekommt ein IndexSet: die Positionen der zu löschenden Zeilen. Meist ist es nur eine, aber im Bearbeitungsmodus können es mehrere sein.
• items.remove(atOffsets:) entfernt genau diese Positionen aus dem Array. Diese Methode bringt SwiftUI für Arrays mit.

Und wieder gilt: Du löschst nur aus den Daten. Die Zeile verschwindet, weil die Liste den neuen Zustand beschreibt.

Verschieben

Ganz ähnlich funktioniert das Neuordnen:

ForEach(items) { item in
    Text(item.name)
}
.onDelete { indexSet in
    items.remove(atOffsets: indexSet)
}
.onMove { indexSet, newOffset in
    items.move(fromOffsets: indexSet, toOffset: newOffset)
}

Die Closure bekommt die alten Positionen und die neue Zielposition. move(fromOffsets:toOffset:) erledigt den Rest.

Zum Verschieben muss die Liste aber im Bearbeitungsmodus sein. Dafür brauchst du einen EditButton.

Der Bearbeitungsmodus

struct ShoppingList: View {
    @State private var items = [
        ShoppingItem(name: "Brot"),
        ShoppingItem(name: "Milch"),
        ShoppingItem(name: "Käse")
    ]

    var body: some View {
        NavigationStack {
            List {
                ForEach(items) { item in
                    Text(item.name)
                }
                .onDelete { items.remove(atOffsets: $0) }
                .onMove { items.move(fromOffsets: $0, toOffset: $1) }
            }
            .navigationTitle("Einkaufsliste")
            .toolbar {
                EditButton()
            }
        }
    }
}

• NavigationStack gibt der Liste eine Navigationsleiste mit Titel (Lektion 2.17).
• .toolbar { EditButton() } setzt einen „Bearbeiten“-Knopf in die Leiste (Lektion 2.18).
• Tippt der Nutzer darauf, erscheinen links rote Minus-Symbole zum Löschen und rechts Griffe zum Verschieben. Der Knopf heißt dann „Fertig“.

Die Closures von onDelete und onMove sind hier mit $0 und $1 abgekürzt (Lektion 1.11).

Eigene Wischaktionen

Löschen ist nicht die einzige sinnvolle Wischaktion. Mit .swipeActions baust du eigene, und zwar an der Zeile, nicht am ForEach:

ForEach(items) { item in
    Text(item.name)
        .swipeActions(edge: .trailing) {
            Button("Löschen", systemImage: "trash", role: .destructive) {
                delete(item)
            }
        }
        .swipeActions(edge: .leading) {
            Button("Gekauft", systemImage: "checkmark") {
                toggleBought(item)
            }
            .tint(.green)
        }
}

• edge: .trailing: Aktionen erscheinen beim Wischen nach links (am rechten Rand). .leading: beim Wischen nach rechts.
• Mehrere Buttons in einer Closure ergeben mehrere Aktionen nebeneinander.
• .tint färbt die Aktion. Mit role: .destructive wird sie automatisch rot.

Ein Element in einem Array finden

In delete(item) und toggleBought(item) musst du das Element im Array finden. Genau dafür ist die id da:

func delete(_ item: ShoppingItem) {
    items.removeAll { $0.id == item.id }
}

func toggleBought(_ item: ShoppingItem) {
    if let index = items.firstIndex(where: { $0.id == item.id }) {
        items[index].isBought.toggle()
    }
}

• removeAll { ... } entfernt alle Elemente, für die die Closure true liefert.
• firstIndex(where:) liefert die Position des ersten passenden Elements, als Optional, denn es könnte keins geben (Lektion 1.8). Mit if let packen wir sie aus (Lektion 1.9).

Hier zeigt sich, warum eine eindeutige id so wertvoll ist: Mit dem Namen statt der id würdest du beim doppelten „Brot“ beide erwischen.

Mit Bindings bearbeiten

Aus der letzten Lektion kennst du ForEach($items). Mit Identifiable entfällt die id:-Angabe:

List {
    ForEach($items) { $item in
        Toggle(item.name, isOn: $item.isBought)
    }
    .onDelete { items.remove(atOffsets: $0) }
}

Jeder Toggle ändert direkt das richtige Element, und Löschen funktioniert trotzdem.

Typische Fehler

id als var

struct Item: Identifiable {
    var id = UUID()
}

Das kompiliert, ist aber riskant: Wird die id versehentlich geändert, hält SwiftUI das Element für ein neues. Nimm let.

Neue id bei jeder Erzeugung

var id: UUID { UUID() }   // ❌ berechnete Eigenschaft

Jeder Zugriff liefert eine neue Kennung. Für SwiftUI ist jede Zeile bei jeder Aktualisierung ein neues Element: Animationen springen, Eingaben gehen verloren. Die id muss gespeichert sein.

onDelete an der falschen Stelle

List(items) { item in
    Text(item.name)
}
.onDelete { ... }

onDelete gibt es nur an ForEach. Nimm die Form List { ForEach(...) { ... }.onDelete { ... } }.

Verschieben ohne Bearbeitungsmodus

.onMove ist gesetzt, aber man kann nichts verschieben. Ohne EditButton bzw. aktiven Bearbeitungsmodus erscheinen keine Griffe.

FAQ

Übungen

struct City: Identifiable {
    let id = UUID()
    let name: String
}

struct CityList: View {
    @State private var cities = ["Wien", "Graz", "Linz"].map { City(name: $0) }

    var body: some View {
        List {
            ForEach(cities) { city in
                Label(city.name, systemImage: "building.2")
            }
            .onDelete { cities.remove(atOffsets: $0) }
        }
    }
}

struct ShoppingItem: Identifiable {
    let id = UUID()
    var name: String
    var isBought = false
}

struct ShoppingList: View {
    @State private var items = ["Brot", "Milch", "Käse", "Äpfel"].map { ShoppingItem(name: $0) }

    var body: some View {
        NavigationStack {
            List {
                ForEach(items) { item in
                    Text(item.name)
                        .strikethrough(item.isBought)
                        .foregroundStyle(item.isBought ? .secondary : .primary)
                        .swipeActions(edge: .leading) {
                            Button(item.isBought ? "Zurück" : "Gekauft", systemImage: "checkmark") {
                                toggleBought(item)
                            }
                            .tint(.green)
                        }
                        .swipeActions(edge: .trailing) {
                            Button("Löschen", systemImage: "trash", role: .destructive) {
                                items.removeAll { $0.id == item.id }
                            }
                        }
                }
                .onMove { items.move(fromOffsets: $0, toOffset: $1) }
            }
            .navigationTitle("Einkauf")
            .toolbar { EditButton() }
        }
    }

    func toggleBought(_ item: ShoppingItem) {
        if let index = items.firstIndex(where: { $0.id == item.id }) {
            items[index].isBought.toggle()
        }
    }
}

Zusammenfassung

• Identifiable mit let id = UUID() macht jedes Element eindeutig und stabil erkennbar.
• Dann braucht ForEach keine id:-Angabe mehr.
• .onDelete am ForEach ermöglicht Löschen per Wischgeste, mit remove(atOffsets:).
• .onMove mit move(fromOffsets:toOffset:) ermöglicht Verschieben im Bearbeitungsmodus.
• EditButton() schaltet den Bearbeitungsmodus um.
• .swipeActions an der Zeile bietet eigene Wischaktionen.
• Elemente findest du über ihre id: firstIndex(where:) und removeAll(where:).

Spickzettel

struct Item: Identifiable {
    let id = UUID()
    var name: String
}

List {
    ForEach(items) { item in
        Text(item.name)
            .swipeActions(edge: .leading) {
                Button("Markieren", systemImage: "star") { ... }.tint(.yellow)
            }
    }
    .onDelete { items.remove(atOffsets: $0) }
    .onMove { items.move(fromOffsets: $0, toOffset: $1) }
}
.toolbar { EditButton() }

items.firstIndex(where: { $0.id == item.id })
items.removeAll { $0.id == item.id }