SwiftUI Academy · Pelajaran

Menambahkan Item Baru

Tambahkan baris dan jaga agar list tetap sinkron.

Menambahkan Item Baru adalah pelajaran SwiftUI Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar SwiftUI Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus SwiftUI Academy mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

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. 🎉

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menambahkan Item Baru” gratis?

Ya — teks lengkap “Menambahkan Item Baru” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus SwiftUI Academy, upgrade ke CoddyKit PRO. Kursus SwiftUI Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Menambahkan Item Baru”?

Tambahkan baris dan jaga agar list tetap sinkron. Kamu berlatih SwiftUI Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai SwiftUI Academy?

Tidak diperlukan pengalaman sebelumnya. SwiftUI Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Menambahkan Item Baru” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran SwiftUI Academy ini?

Ya. Setiap pelajaran SwiftUI Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke SwiftUI Academy