SwiftUI Academy · Lektion

Neue Elemente hinzufügen

Fügen Sie Zeilen an und halten Sie die Liste synchron.

Neue Elemente hinzufügen ist eine kostenlose SwiftUI Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des SwiftUI Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der SwiftUI Academy-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

Growing the List

A useful list does not stay frozen. Letting users add items is the other half of editing, and it keeps your @State array in charge. ✨

Append to Your Array

Adding a row is just adding data. Call append on your @State array and SwiftUI inserts a fresh row automatically.

items.append(Item(name: "Bread"))

A Toolbar Add Button

Most apps add items from a plus button. Put a Button in the toolbar that calls your add logic when tapped.

.toolbar {
    Button("Add") { addItem() }
}

Use a System Plus Icon

Swap the text for an SF Symbol so it reads as Add. The plus symbol is the universal cue users already understand.

Button {
    addItem()
} label: {
    Image(systemName: "plus")
}

Writing addItem

Your addItem function creates a new model value and appends it. Keep it small and let the array drive the UI.

func addItem() {
    items.append(Item(name: "New"))
}

Add From a TextField

Often the new item comes from typing. Bind a TextField to a draft string, then append that text when the user confirms.

@State private var draft = ""
TextField("Item", text: $draft)

Append Then Clear

After appending, reset the draft so the field is empty for the next entry. Clearing draft keeps the form feeling fresh.

items.append(Item(name: draft))
draft = ""

Guard Against Blanks

Do not add empty rows. A quick guard on the trimmed draft stops accidental blank items from cluttering your list.

guard !draft.trimmingCharacters(
    in: .whitespaces).isEmpty
else { return }

New Rows Animate In

Because the array changed, SwiftUI slides the new row into place. Wrap the append in withAnimation for an even snappier feel.

withAnimation {
    items.append(Item(name: draft))
}

Insert at the Top

Want newest first? Use insert(at:) with index 0 instead of append, and the row appears at the top of the list.

items.insert(Item(name: draft),
             at: 0)

One Source of Truth

Add, delete, and move all mutate the same @State array. That single source of truth keeps your whole list consistent.

Quick Check

How do you add a new row to a SwiftUI list?

Recap: Adding Items

You can grow a list by appending to its @State array, often from a toolbar button or a TextField, with guards and animation. 🎉

Häufig gestellte Fragen

Ist die Lektion „Neue Elemente hinzufügen“ kostenlos?

Ja — der vollständige Text von „Neue Elemente hinzufügen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des SwiftUI Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der SwiftUI Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Neue Elemente hinzufügen“?

Fügen Sie Zeilen an und halten Sie die Liste synchron. Du übst SwiftUI Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um SwiftUI Academy zu starten?

Keine Vorkenntnisse erforderlich. SwiftUI Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Neue Elemente hinzufügen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser SwiftUI Academy-Lektion Code schreiben und ausführen?

Ja. Jede SwiftUI Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu SwiftUI Academy