إضافة عناصر جديدة
أضف الصفوف إلى القائمة وحافظ على مزامنتها
إضافة عناصر جديدة درس مجاني في SwiftUI Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في SwiftUI Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة SwiftUI Academy 4 دروس في المجموع.
بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.
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. 🎉
الأسئلة الشائعة
هل درس «إضافة عناصر جديدة» مجاني؟
نعم — نص درس «إضافة عناصر جديدة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة SwiftUI Academy، انتقل إلى CoddyKit PRO. تتضمن دورة SwiftUI Academy 4 دروس في المجموع.
ماذا ستتعلم في «إضافة عناصر جديدة»؟
أضف الصفوف إلى القائمة وحافظ على مزامنتها تتمرن على SwiftUI Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ SwiftUI Academy؟
لا تُشترط خبرة سابقة. SwiftUI Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «إضافة عناصر جديدة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس SwiftUI Academy هذا؟
نعم. كل درس في SwiftUI Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- حذف الصفوف بالسحب
- إعادة الترتيب باستخدام onMove
- إضافة عناصر جديدة
- السحب للتحديث