SwiftUI لـ Swift: دليل شامل مع أمثلة

ما هو SwiftUI ولماذا هو مطلوب؟

SwiftUI هو إطار عمل حديث وتصريحي لبناء واجهات المستخدم على جميع منصات Apple: iOS و macOS و watchOS و tvOS. على عكس النهج التقليدي UIKit (حيث تدير الحالة وتحديث المشاهدات يدويًا)، يتيح لك SwiftUI وصف كيف يجب أن تكون الواجهة، وليس كيفية بنائها. يقوم الإطار تلقائيًا بتتبع تغييرات البيانات وإعادة رسم أجزاء الواجهة التي تغيرت فقط.

لماذا هو مطلوب؟

\n
• كود أقل: نفس الكود يعمل على جميع منصات Apple.
\n
• التصريحية: تصف الواجهة كمجموعة من الهياكل البسيطة، وليس كسلسلة من الأوامر.
\n
• إدارة الحالة التلقائية: @State, @Binding, @ObservableObject — SwiftUI يقرر بنفسه متى يعيد رسم الواجهة.
\n
• معاينة حية: في Xcode ترى التغييرات في الوقت الفعلي.
\n
• الرسوم المتحركة: إضافة الرسوم المتحركة هي سطر واحد من الكود.
\n

SwiftUI ليس مكتبة تحتاج إلى تثبيتها بشكل منفصل. إنه إطار عمل مدمج، متاح منذ iOS 13 و macOS 10.15 و watchOS 6 و tvOS 13. يأتي مع Xcode و SDK من Apple.

التثبيت (إعداد المشروع)

نظرًا لأن SwiftUI جزء من SDK القياسي لـ Apple، فلا يحتاج إلى تثبيته عبر pip أو npm أو CocoaPods. كل ما تحتاجه هو Xcode (الإصدار 11 أو أحدث) ومشروع مهيأ لـ iOS 13+ / macOS 10.15+.

كيفية إنشاء مشروع جديد باستخدام SwiftUI:

\n
1. افتح Xcode.
\n
2. اختر File → New → Project.
\n
3. اختر قالب "App" (أو "SwiftUI App" في الإصدارات الأقدم).
\n
4. تأكد من اختيار "SwiftUI" في حقل "Interface".
\n
5. اضغط "Next" وأنشئ المشروع.
\n

إذا كنت تعمل على مشروع UIKit قائم، يمكنك إضافة ملف SwiftUI (File → New → File → SwiftUI View). يمكن لـ SwiftUI و UIKit التعايش في نفس المشروع عبر UIHostingController.

بداية سريعة مع مثال كود

لنقم بإنشاء تطبيق بسيط "عداد النقرات". هذا مثال كلاسيكي يوضح المفاهيم الأساسية لـ SwiftUI: الحالة، الأزرار والنص.

import SwiftUI\n\nstruct ContentView: View {\n    // @State — خاصية تخزن الحالة وتعيد رسم الـ View تلقائيًا عند تغييرها\n    @State private var count = 0\n\n    var body: some View {\n        VStack(spacing: 20) {\n            Text("العداد: \\(count)")\n                .font(.largeTitle)\n                .padding()\n\n            HStack(spacing: 20) {\n                Button("زيادة") {\n                    count += 1\n                }\n                .padding()\n                .background(Color.blue)\n                .foregroundColor(.white)\n                .cornerRadius(10)\n\n                Button("إعادة تعيين") {\n                    count = 0\n                }\n                .padding()\n                .background(Color.red)\n                .foregroundColor(.white)\n                .cornerRadius(10)\n            }\n        }\n    }\n}\n\n// نقطة الدخول للتطبيق\n@main\nstruct MyApp: App {\n    var body: some Scene {\n        WindowGroup {\n            ContentView()\n        }\n    }\n}\n

الشرح:

\n
• @State — يخبر SwiftUI أن هذه الخاصية بحاجة للتتبع. عند تغيير count، يعيد SwiftUI رسم ContentView تلقائيًا.
\n
• VStack و HStack — حاويات للترتيب الرأسي والأفقي للعناصر.
\n
• Button — ينشئ زرًا ينفذ إغلاقًا عند الضغط عليه.
\n
• المعدّلات (.font(), .padding(