صار لدى Pocket Budget مخزن، وview للصف، وstate تقود الشاشة. الآن يجب أن يصبح تطبيقًا يستطيع الناس استخدامه: قائمة بمصاريف هذا الشهر، ونقرة تفتح التفاصيل، وزر + يفتح نموذجًا. هذه الأنماط الثلاثة (القائمة، والتنقّل بالدفع، والنموذج المنبثق) تشكّل هيكل معظم تطبيقات iPhone التي استخدمتها.
\nimport SwiftUI\n\nstruct ExpensesScreen: View {\n let store: BudgetStore\n @State private var isAdding = false\n\n var body: some View {\n NavigationStack {\n List {\n ForEach(store.expenses) { expense in\n NavigationLink(value: expense) {\n ExpenseRow(expense: expense)\n }\n }\n .onDelete { offsets in\n store.delete(at: offsets)\n }\n }\n .overlay {\n if store.expenses.isEmpty {\n ContentUnavailableView(\"No expenses yet\", systemImage: \"tray\",\n description: Text(\"Tap + to add your first one.\"))\n }\n }\n .navigationTitle(\"Expenses\")\n .navigationDestination(for: Expense.self) { expense in\n ExpenseDetail(expense: expense)\n }\n .toolbar {\n Button(\"Add expense\", systemImage: \"plus\") {\n isAdding = true\n }\n }\n .sheet(isPresented: $isAdding) {\n AddExpenseView(store: store)\n }\n }\n }\n}هذه هي الشاشة الرئيسية كاملة؛ خذها قطعة قطعة. ينتج ForEach(store.expenses) صفًا لكل مصروف. ويحتاج إلى هوية ثابتة لكل عنصر حتى يحرّك SwiftUI الصف الصحيح عند إدراج مصروف أو حذفه بدل إعادة رسم كل شيء، وهذه الهوية هي الـ id الذي يتطلّبه Identifiable. ويضيف .onDelete الحذف بالسحب ويسلّمك مواضع العناصر المراد حذفها؛ وdelete(at:) في المخزن سطر واحد: expenses.remove(atOffsets: offsets). هذه الـ method معرّفة في SwiftUI، لذلك يحتاج الملف BudgetStore.swift إلى import SwiftUI إلى جانب Observation.
ContentUnavailableView هو الحالة الفارغة القياسية في النظام. القائمة الفارغة بلا تفسير تبدو معطّلة؛ أما رسالة قصيرة وتلميح إلى الخطوة التالية فيجعلانها تبدو مكتملة.
يدير NavigationStack مكدّسًا من الشاشات: القائمة في الأسفل، والتفاصيل تُدفع فوقها، مع زر الرجوع وإيماءة السحب من النظام دون أي جهد.
ينقسم التنقّل إلى نصفين. NavigationLink(value: expense) يقول ما الذي نُقر عليه. و.navigationDestination(for: Expense.self) يقول أيّ شاشة تعرض Expense. يجب أن تكون القيمة Hashable، وExpense كذلك أصلًا. إبقاء النصفين منفصلين يعني أن الوجهة تُعلَن مرة واحدة مهما كثرت الأماكن التي تربط إلى مصروف، ويجعل التنقّل البرمجي ممكنًا:
@State private var path: [Expense] = []\n\n// In body:\nNavigationStack(path: $path) {\n // …the same List and modifiers as above\n}\n\n// Anywhere in this view, for example after saving:\npath.append(newExpense) // pushes ExpenseDetail\npath.removeAll() // pops back to the listالمسار state عادية، فيصبح التنقّل بيانات تستطيع فحصها واختبارها وتغييرها من الكود. هكذا تفتح مصروفًا محدّدًا من إشعار، أو تقفز عائدًا إلى الجذر بعد مسار من عدة خطوات. وللشاشات التي فيها أنواع وجهات مختلطة، يؤدّي NavigationPath الدور نفسه بقيم ممحوّة النوع.
يمكن أن تكون شاشة التفاصيل Form يُستخدم للعرض، بصفوف LabeledContent تنسّق القيم لك:
struct ExpenseDetail: View {\n let expense: Expense\n\n var body: some View {\n Form {\n LabeledContent(\"Amount\", value: expense.amount, format: .currency(code: \"USD\"))\n LabeledContent(\"Category\", value: expense.category.title)\n LabeledContent(\"Date\", value: expense.date, format: .dateTime.day().month().year())\n }\n .navigationTitle(expense.title)\n }\n}الدفع مخصّص للتعمّق في المحتوى. أما الـ sheet (الورقة المنبثقة) فلمهمّة مستقلّة يُنهيها المستخدم أو يتخلّى عنها، مثل إضافة مصروف. يعرض .sheet(isPresented: $isAdding) النموذج كلما أصبحت isAdding صحيحة. إليك النموذج:
struct AddExpenseView: View {\n let store: BudgetStore\n @Environment(\\.dismiss) private var dismiss\n\n @State private var title = \"\"\n @State private var amount: Decimal?\n @State private var category: Category = .food\n @State private var date = Date.now\n\n private var canSave: Bool {\n !title.trimmingCharacters(in: .whitespaces).isEmpty && (amount ?? 0) > 0\n }\n\n var body: some View {\n NavigationStack {\n Form {\n Section(\"Details\") {\n TextField(\"Title\", text: $title)\n TextField(\"Amount\", value: $amount, format: .currency(code: \"USD\"))\n .keyboardType(.decimalPad)\n }\n Section {\n Picker(\"Category\", selection: $category) {\n ForEach(Category.allCases, id: \\.self) { category in\n Label(category.title, systemImage: category.symbolName)\n .tag(category)\n }\n }\n DatePicker(\"Date\", selection: $date, in: ...Date.now, displayedComponents: .date)\n }\n }\n .navigationTitle(\"New Expense\")\n .navigationBarTitleDisplayMode(.inline)\n .toolbar {\n ToolbarItem(placement: .cancellationAction) {\n Button(\"Cancel\") { dismiss() }\n }\n ToolbarItem(placement: .confirmationAction) {\n Button(\"Save\") {\n guard let amount else { return }\n store.add(Expense(title: title, amount: amount, category: category, date: date))\n dismiss()\n }\n .disabled(!canSave)\n }\n }\n }\n }\n}تغلّف الـ sheet نموذجها بـ NavigationStack خاص بها. فالـ sheet عرض منفصل لا يرث مكدّس القائمة، وبدونه لا يوجد شريط يحمل العنوان أو زرَّي Cancel وSave. ووضعهما عبر .cancellationAction و.confirmationAction يضعهما حيث يتوقّعهما مستخدمو iOS.
كل حقل مربوط بـ @State خاصة به، فيكون النموذج مسوّدة: لا شيء يمسّ المخزن حتى النقر على Save. وCancel يرمي المسوّدة. هذا سلوك القيمة يؤتي ثماره مرة أخرى.
حقل المبلغ هو الأهم. يحلّل TextField(value:format:) ما يكتبه المستخدم حسب إعداداته المحلية، فتصبح “12,50” في ألمانيا 12.5، ولا تحمل amount إلا رقمًا حُلّل بنجاح، أو nil ما دام لا يوجد رقم. هذا يستبدل التحليل المتساهل بـ Decimal(string:) من درس الـ optionals. ويفكّها guard let amount في إجراء Save، ويعطّل canSave الزر حتى يكون العنوان والمبلغ منطقيين، فلا يمكن حفظ مدخلات غير صالحة أصلًا. والنطاق in: ...Date.now يمنع التواريخ المستقبلية. أما dismiss فيأتي من الـ environment ويغلق كل ما عرض هذا الـ view.
صار Pocket Budget الآن تطبيقًا يعمل بمسار حقيقي من القائمة إلى التفاصيل إلى النموذج. لكنه ينسى كل شيء حين تغلقه، ولا يعرف شيئًا خارج الهاتف. القسم الأخير يصلح الأمرين، بدءًا بكيفية تنفيذ Swift للعمل الذي يستغرق وقتًا.
\n","toc":[{"id":"sec-1","text":"قائمة من صفوف قابلة للتمييز","level":2},{"id":"sec-2","text":"التنقّل بالقيم","level":2},{"id":"sec-3","text":"نموذج داخل sheet","level":2}],"takeaways":["List وForEach يحتاجان إلى التمييز بين الصفوف، ولهذا تتوافق نماذجك مع Identifiable.","NavigationLink(value:) مع .navigationDestination(for:) يفصلان بين ما نُقر عليه وبين الشاشة التي تعرضه.","استخدم sheet لمهمة مستقلّة مثل إضافة مصروف، وأغلقها عبر قيمة dismiss من الـ environment.","حقل TextField مع format: يحوّل الكتابة إلى قيمة محدّدة النوع حسب الإعدادات المحلية للمستخدم، بدل تحليل النصوص يدويًا.","قيم .tag في Picker يجب أن تكون من نوع selection نفسه تمامًا، وإلا يتوقّف المنتقي عن العمل بصمت."],"further":[{"title":"NavigationStack","url":"https://developer.apple.com/documentation/swiftui/navigationstack"},{"title":"Lists","url":"https://developer.apple.com/documentation/swiftui/lists"},{"title":"Form","url":"https://developer.apple.com/documentation/swiftui/form"}],"quiz":[{"q":"كتبت NavigationLink(value: expense) لكن النقر على الصف لا يفعل شيئًا. ما السبب الأرجح؟
.navigationDestination(for: Expense.self) داخل الـ NavigationStack.","why":"صحيح. رابط القيمة يقول فقط ما الذي اختير؛ أما الـ modifier الخاص بالوجهة فيقرّر ما يُعرض له."},{"text":"Expense لا يتوافق مع Codable.","why":"قيم التنقّل يجب أن تكون Hashable، لا Codable. وCodable لا يهم إلا إن كنت تحفظ المسار."},{"text":"الصف يحتاج إلى .onTapGesture.","why":"NavigationLink يتولّى النقر بنفسه؛ وإضافة gesture قد تحجبه فعلًا."}],"answer":0},{"q":"يستخدم منتقي التصنيفات selection: $category حيث category من النوع Category، وصفوفه معلّمة بـ .tag(category.rawValue). ماذا يحدث؟
String لا تساوي Category أبدًا."},{"text":"يظهر المنتقي، لكن اختيار صف لا يغيّر الاختيار أبدًا.","why":"صحيح. الـ tags من النوع String والاختيار من النوع Category، فلا شيء يتطابق. علّم الصفوف بقيمة الـ enum نفسها."},{"text":"تفشل الترجمة بخطأ في النوع.","why":".tag تقبل أي قيمة Hashable، فيُترجَم الكود ويفشل بهدوء وقت التشغيل، وهذا ما يجعله خبيثًا."}],"answer":1},{"q":"لماذا تربط حقل المبلغ بقيمة Decimal? مع format: .currency(code: "USD") بدل String؟
TextField.","why":"TextField("Title", text: $title) هو أشيع حقل نصي على الإطلاق."},{"text":"لأنه يجعل لوحة المفاتيح رقمية تلقائيًا.","why":"الـ format لا يغيّر لوحة المفاتيح؛ هذا دور .keyboardType(.decimalPad)."},{"text":"الحقل يحلّل مدخلات المستخدم حسب إعداداته المحلية ويسلّمك Decimal محدّد النوع، فلا يبقى نص تحلّله.","why":"صحيح. “12,50” في ألمانيا تصبح 12.5، ولا تكتب أنت أي محلّل."}],"answer":2}],"exercise":{"kind":"fill","language":"swift","template":"NavigationStack {\n List(store.expenses) { expense in\n NavigationLink({{0}}: expense) {\n ExpenseRow(expense: expense)\n }\n }\n .navigationTitle(\"Expenses\")\n .{{1}}(for: Expense.self) { expense in\n ExpenseDetail(expense: expense)\n }\n .toolbar {\n Button(\"Add expense\", systemImage: \"plus\") { isAdding = true }\n }\n .{{2}}(isPresented: $isAdding) {\n AddExpenseView(store: store)\n }\n}","blanks":[{"answers":["value"]},{"answers":["navigationDestination"]},{"answers":["sheet"]}],"title":"اربط الشاشة الرئيسية","prompt":"أكمل الشاشة الرئيسية في Pocket Budget. يجب أن يدفع النقر على صف الشاشة ExpenseDetail لذلك المصروف باستخدام التنقّل المبني على القيم، ويجب أن يعرض زر + الشاشة AddExpenseView بشكل منبثق ما دامت isAdding صحيحة.
for:.","الـ modifier الذي يعرض بطاقة منبثقة فوق الشاشة الحالية اسمه كلمة واحدة."],"explanation":"NavigationLink(value: expense) يسجّل فقط أيّ مصروف نُقر عليه. و.navigationDestination(for: Expense.self) يخبر الـ NavigationStack المحيط بما يعرضه لأي قيمة Expense، فيعمل الاثنان معًا كزوج؛ وبدون الوجهة لا يفعل النقر شيئًا. أما .sheet(isPresented: $isAdding) فيعرض النموذج كلما أصبحت isAdding مساوية لـ true، ويعيدها إلى false حين تُغلق الـ sheet.
NavigationLink(value: expense) { … }\n.navigationDestination(for: Expense.self) { … }\n.sheet(isPresented: $isAdding) { … }