إن كنت قد استخدمت UIKit، أو تعاملت مع الـ DOM يدويًا، فأنت معتاد على أن تخبر الشاشة بما يجب أن تغيّره: اضبط نص هذا العنوان، وأخفِ ذلك الزر، وأدرج صفًا. أما SwiftUI فيقلب ذلك. أنت تصف كيف يجب أن تبدو الشاشة للبيانات الحالية، وSwiftUI يكتشف ما تغيّر ويحدّث البكسلات. تنحصر مهمّتك في كتابة هذا الوصف جيدًا.
\nهذا هو الصف الذي يعرضه Pocket Budget لكل مصروف، باستخدام النوعين Expense وCategory من القسم السابق:
import SwiftUI\n\nstruct ExpenseRow: View {\n let expense: Expense\n\n var body: some View {\n HStack(spacing: 12) {\n Image(systemName: expense.category.symbolName)\n .font(.title3)\n .frame(width: 32)\n .foregroundStyle(.tint)\n\n VStack(alignment: .leading, spacing: 2) {\n Text(expense.title)\n .font(.headline)\n Text(expense.date, format: .dateTime.day().month())\n .font(.subheadline)\n .foregroundStyle(.secondary)\n }\n\n Spacer()\n\n Text(expense.amount, format: .currency(code: \"USD\"))\n .font(.body.monospacedDigit())\n }\n .padding(.vertical, 4)\n }\n}يتوافق ExpenseRow مع الـ protocol المسمّى View، ومتطلّبه الوحيد هو body. إنه struct، فإنشاؤه رخيص، وSwiftUI ينشئ هذه الـ structs ويتخلّص منها باستمرار. لا تفكّر في الـ view (العرض) على أنه الشيء الظاهر على الشاشة؛ فكّر فيه على أنه وصفة يقرؤها SwiftUI كلما تغيّرت البيانات.
some View هو النوع المُعتِم (opaque type) من درس الـ protocols. النوع الحقيقي لهذا الـ body هو generic متداخل بعمق، مبني من كل stack وكل modifier، وsome View تتيح للـ compiler أن يتتبّعه دون أن تكتبه أنت.
ثلاث حاويات تتكفّل بمعظم التخطيطات. HStack يضع العناصر الأبناء من اليسار إلى اليمين (ومن اليمين إلى اليسار في العربية والعبرية، تلقائيًا)، وVStack من الأعلى إلى الأسفل، وZStack يرتّبها في طبقات من الأمام إلى الخلف. وتتحكّم alignment وspacing في اصطفاف الأبناء. أما Spacer() فيتمدّد ليملأ المساحة الفارغة، وهكذا ينتهي المبلغ مثبّتًا عند الحافة الختامية.
يستطيع Text أن ينسّق القيم لك: Text(expense.amount, format: .currency(code: "USD")) وText(expense.date, format: .dateTime.day().month()) يتبعان الإعدادات المحلية للمستخدم، فيرى المستخدم في القاهرة أو برلين الفواصل وترتيب التاريخ اللذين يتوقّعهما. و.monospacedDigit() يُبقي أعمدة المبالغ مصطفّة.
.font(.headline) لا يغيّر النص في مكانه. بل يعيد view جديدًا يغلّف النص ويطبّق عليه خطًّا. اربط ثلاثة modifiers (معدِّلات) وتكون قد بنيت ثلاث طبقات. لهذا الترتيب مهم:
Text(\"Food\")\n .padding()\n .background(.blue) // blue covers the text AND the padding\n\nText(\"Food\")\n .background(.blue) // blue covers only the text\n .padding() // clear space outside the blueاقرأ سلسلة الـ modifiers من الأعلى إلى الأسفل على أنها «خذ هذا، ثم غلّفه بذاك». بعض الـ modifiers، مثل .font و.foregroundStyle، تنتقل إلى كل الأبناء، ولهذا يؤدّي ضبط .font(.title3) على VStack إلى تنسيق كل النصوص بداخله.
لأن body وصف، فكود Swift العادي هو ما يقرّر محتواه. جملة if تضمّن view فقط حين يتحقّق شرط، وswitch تختار بين views:
HStack {\n Text(expense.title)\n if expense.amount > 100 {\n Image(systemName: \"exclamationmark.circle\")\n .foregroundStyle(.orange)\n .accessibilityLabel(\"Large expense\")\n }\n}لا يوجد استدعاء «أظهِر» أو «أخفِ» في أي مكان. حين يتغيّر المبلغ، يقرأ SwiftUI الـ body من جديد فتظهر الأيقونة أو تختفي من تلقاء نفسها. أبقِ الـ body خاليًا من الآثار الجانبية، مثل استدعاءات الشبكة أو الطباعة، لأن SwiftUI قد يقرؤه مرات كثيرة وفي لحظات لا تتحكّم فيها.
أضف preview (معاينة) في أسفل الملف:
\n#Preview {\n ExpenseRow(expense: Expense(title: \"Groceries\", amount: 64.2, category: .food, date: .now))\n .padding()\n}يرسمها Xcode في الـ canvas بجانب كودك ويحدّثها وأنت تكتب. الـ previews هي أسرع حلقة تغذية راجعة في تطوير iOS. أضف واحدة لكل حالة مثيرة للاهتمام، مثل عنوان طويل أو مبلغ كبير أو تخطيط من اليمين إلى اليسار، وستكتشف أخطاء التخطيط قبل أن تشغّل الـ simulator أصلًا.
\nحين يتجاوز الـ body نحو شاشة كاملة، استخرج أجزاءه إلى structs مستقلّة:
struct CategoryBadge: View {\n let category: Category\n\n var body: some View {\n Text(category.title)\n .font(.caption.bold())\n .padding(.horizontal, 10)\n .padding(.vertical, 4)\n .background(.blue.opacity(0.15), in: Capsule())\n .foregroundStyle(.blue)\n }\n}الآن يمكن أن يظهر CategoryBadge(category: expense.category) في الصف وفي شاشة التفاصيل وفي شريط الفلاتر، بالتنسيق نفسه تمامًا. الاستخراج مجاني وقت التشغيل، ويعطي SwiftUI وحدات أصغر يقارنها حين تتغيّر البيانات.
كل ما في هذا الدرس يعرض بيانات ثابتة. أما الشاشات الحقيقية فتتغيّر: المستخدم يكتب ويبدّل المفاتيح ويضيف المصاريف. يقدّم الدرس التالي الـ state، أي البيانات التي تقود هذه التغييرات، وكيف يعرف SwiftUI متى يعيد الرسم.
\n","toc":[{"id":"sec-1","text":"الـ view هو struct له body","level":2},{"id":"sec-2","text":"الـ stacks والـ spacers","level":2},{"id":"sec-3","text":"الـ modifiers تغلّف الـ views","level":2},{"id":"sec-4","text":"المنطق داخل body","level":2},{"id":"sec-5","text":"الـ previews","level":2},{"id":"sec-6","text":"views صغيرة تُركَّب معًا","level":2}],"takeaways":["الـ view في SwiftUI هو struct خفيف يصف الـbody الخاص به كيف يجب أن تبدو الشاشة للبيانات الحالية.","VStack وHStack وZStack ترتّب العناصر الأبناء عموديًا وأفقيًا وفي طبقات؛ وSpacer يدفع المحتوى بعيدًا عن بعضه.","كل modifier يغلّف الـ view في view جديد، لذلك الترتيب مهم؛ وpadding قبل background يعني أن الخلفية تُرسم خلف الحشوة أيضًا.","استخرج subview بمجرّد أن يصعب قراءة الـ body؛ الـ views الصغيرة لا تكلّف شيئًا وقت التشغيل."],"further":[{"title":"Configuring views","url":"https://developer.apple.com/documentation/swiftui/configuring-views"},{"title":"SwiftUI Tutorials","url":"https://developer.apple.com/tutorials/swiftui"}],"quiz":[{"q":"كيف يبدو Text("Food").background(.blue).padding()؟
.padding().background(.blue). هنا تُطبَّق الخلفية قبل أن توجد الحشوة."},{"text":"يملأ الأزرق إطار النص نفسه فقط، مع مساحة شفّافة حوله.","why":"صحيح. يغلّف background النص، ثم يضيف padding مساحة فارغة خارج ذلك الـ view الملوّن."},{"text":"يعيد SwiftUI ترتيب الـ modifiers، فيبدو الشكل نفسه في الحالتين.","why":"يطبّق SwiftUI الـ modifiers بالترتيب الذي تكتبه بالضبط؛ وكل واحد منها يغلّف النتيجة السابقة."}],"answer":1},{"q":"لماذا يُعلَن body على أنه some View بدل نوع محدّد؟
some تُخفي اسمًا، ولا تجعل النوع ديناميكيًا."},{"text":"لأن النوع الحقيقي generic طويل ومتداخل لن ترغب أبدًا في كتابته يدويًا.","why":"صحيح. الـ compiler يعرف النوع الدقيق؛ وsome View توفّر عليك كتابته."},{"text":"لأن View هو class وsome تحوّله إلى struct.","why":"View هو protocol، والـ views الخاصة بك structs في كل الأحوال."}],"answer":1},{"q":"كبر الـ body لأحد الصفوف حتى صار 70 سطرًا. ماذا يفعل مطوّر SwiftUI متمرّس؟
AnyView.","why":"AnyView يمحو معلومات النوع التي يستخدمها SwiftUI للمقارنة بكفاءة. استخدم struct فرعيًا بدلًا من ذلك."},{"text":"يستخرج الأجزاء ذات المعنى إلى structs صغيرة مستقلّة من نوع View.","why":"صحيح. الـ subviews المسمّاة تُقرأ كمخطّط للشاشة، ويمكن معاينة كلٍّ منها وحده."}],"answer":2}],"exercise":{"kind":"choice","options":["a","b","c","d"],"correct":["b"],"title":"ابنِ شارة التصنيف","prompt":"يطلب تصميم Pocket Budget عنوان تصنيف على شكل حبّة دواء: خلفية زرقاء على شكل كبسولة، مع إزاحة للنص عن حواف الكبسولة تمنحه مساحة للتنفّس. أيّ سلسلة modifiers تنتج ذلك؟
\n","hints":["يجب أن يغطّي الأزرق المساحة حول النص، فيجب أن تكون هذه المساحة موجودة قبل تطبيق الخلفية.","clipShape يقصّ الـ view على شكل معيّن. ماذا سيقصّ إن لم تكن الخلفية قد أُضيفت بعد؟","background(_:in:) يرسم نمطًا داخل شكل في خطوة واحدة."],"explanation":"تُطبَّق الـ modifiers من الأعلى إلى الأسفل، وكلٌّ منها يغلّف النتيجة حتى تلك اللحظة. في السلسلة الصحيحة، ينشئ استدعاءا padding الإزاحة أولًا، ثم يرسم background(.blue, in: Capsule()) كبسولة خلف النص وحشوته.
أما السلاسل الأخرى فتطبّق الخلفية مبكرًا جدًا (فتكون الحشوة خارج الأزرق) أو تقصّ قبل وجود أي خلفية تُقَصّ. حين يكون شكل في SwiftUI بحجم خاطئ، افحص ترتيب الـ modifiers قبل أي شيء آخر.
\n","checkLabels":{},"optionText":{"a":{"text":"Text("Food").background(.blue).padding().clipShape(Capsule())","why":"يُطبَّق الأزرق قبل الحشوة، فيلتصق بالنص؛ ثم يدوّر القصّ منطقة معظمها شفّاف."},"b":{"text":"Text("Food").padding(.horizontal, 12).padding(.vertical, 6).background(.blue, in: Capsule())","why":"صحيح. الحشوة موجودة أولًا، ثم تُرسم الكبسولة خلف النص مع حشوته."},"c":{"text":"Text("Food").clipShape(Capsule()).padding().background(.blue)","why":"هذا يقصّ النص المجرّد، ثم يرسم مستطيلًا أزرق حول الحشوة. تحصل على مستطيل، لا على حبّة."},"d":{"text":"Text("Food").background(.blue).clipShape(Capsule()).padding()","why":"هذا ينشئ حبّة صغيرة تلتصق بالحروف بلا إزاحة، ثم يضيف مساحة شفّافة خارجها."}}},"words":642,"readMinutes":4}