Form في SwiftUI: ما هو، إنشاء النموذج وتكوينه

ما هو Form في SwiftUI؟

Form هو حاوية متخصصة في SwiftUI مصممة لإنشاء نماذج إدخال وشاشات إعدادات. يرث سلوك List لكنه يضيف أنماطاً خاصة بالمنصة: على iOS، يظهر Form كجدول مجمع بزوايا دائرية للأقسام؛ على macOS، يظهر كقائمة نظام قياسية مع خانات اختيار وعناصر تحكم.

على عكس التخطيط اليدوي باستخدام VStack وHStack، يقوم Form تلقائياً بترتيب التباعد بين العناصر، وإضافة فواصل، وتكييف مظهره مع سمة النظام — الفاتحة أو الداكنة. يصف المطور فقط البنية المنطقية: Section للتجميع وعناصر التحكم داخلها. النموذج نفسه يقرر كيفية ترتيب Picker أو Toggle أو Stepper بصرياً على منصة معينة.

يدعم Form جميع عناصر الإدخال القياسية في SwiftUI: TextField للنص، SecureField لكلمات المرور، Picker للاختيار من قائمة، Toggle للتشغيل/الإيقاف، Slider للنطاقات، Stepper للقيم التدريجية، DatePicker للتواريخ. كل عنصر يحصل تلقائياً على نمط يتوافق مع إرشادات واجهة المستخدم (HIG) من Apple على المنصة المستهدفة.

Form مقابل List: مقارنة الحاويات

على الرغم من التشابه البصري، يحل Form و List مهام مختلفة. List هو حاوية عامة لعرض قوائم بيانات قابلة للتمرير مع إمكانية إجراءات السحب وتحرير الصفوف. Form هو حاوية متخصصة لـ إدخال البيانات والإعدادات، محسّنة لأنماط التحكم في النظام.

List مناسب لعرض البيانات الديناميكية: خلاصات الأخبار، الدردشات، كتالوجات المنتجات. Form مناسب للشاشات الثابتة ذات مجموعة متوقعة من الحقول: ملف المستخدم، إعدادات التطبيق، نموذج التسجيل. الفرق الرئيسي: عناصر Form يمكن أن تكون عناصر تحكم تفاعلية، بينما صفوف List غالباً ما تعرض البيانات وتستجيب للنقر بالتنقل أو الإجراء.

وفقاً لإرشادات واجهة المستخدم من Apple (2025)، يجب استخدام Form لشاشات الإعدادات والإدخال حيث يوجد من 3 إلى 20 عنصر تحكم على شاشة واحدة وتقسيمها إلى أقسام يحسن سهولة الاستخدام.

أقسام Section داخل Form

Section هو لبنة البناء الرئيسية لـ Form، مما يسمح بتجميع العناصر المرتبطة منطقياً معاً. كل Section يمكن أن يكون لها رأس وتذييل وأي عدد من عناصر التحكم داخلها. يضيف النظام تلقائياً تباعداً بين الأقسام ويغلف كل قسم في كتلة بصرية بزوايا دائرية.

استخدام Section أمر بالغ الأهمية لـ سهولة قراءة النموذج: العناصر المجمعة حسب المعنى يسهل على المستخدم معالجتها. على سبيل المثال، في شاشة إعدادات الملف الشخصي، يمكن فصل «البيانات الشخصية» و«الإشعارات» و«الأمان» إلى أقسام فردية. كل قسم يمكن أن يحتوي على تذييل بنص توضيحي يعرضه النظام بخط أصغر أسفل مجموعة العناصر.

Form {
    Section(header: Text("الملف الشخصي")) {
        TextField("الاسم", text: $name)
        TextField("Email", text: $email)
    }

    Section(header: Text("الإشعارات"),
            footer: Text("تعطيل أثناء الاجتماعات")) {
        Toggle("Push notifications", isOn: $pushEnabled)
        Toggle("Email notifications", isOn: $emailEnabled)
    }
}

في المثال، القسم الأول «Profile» يحتوي على حقلَي نص بدون تذييل، القسم الثاني «Notifications» يحتوي على مفتاحين مع شرح أسفل المجموعة. يضيف التذييل تلقائياً تباعداً ويستخدم نمط خط التسمية التوضيحية. يمكن أن يحتوي القسم على تذييل بدون رأس أو رأس بدون تذييل.

عناصر التحكم في Form

يدعم Form جميع عناصر الإدخال القياسية في SwiftUI. Picker في Form يظهر تلقائياً كصف تنقل مع انتقال إلى شاشة اختيار منفصلة على iOS. Toggle يظهر كصف مع مفتاح محاذى لليمين. TextField يحصل على نمط إدخال النظام مع نصplaceholder.

للقيم الرقمية، يُستخدم Stepper (تغيير تدريجي) وSlider (تغيير سلس ضمن نطاق). DatePicker يدعم عدة أوضاع: date, time, dateAndTime. ColorPicker متاح لاختيار اللون. كل عنصر يتكيف مع المنصة دون كود إضافي — على iOS تستخدم عناصر التحكم أنماط UIKit الأصلية، على macOS تستخدم AppKit.

لعناصر التحكم المخصصة داخل Form، يمكن استخدام أي SwiftUI View — ترث السلوك القياسي للقسم. ومع ذلك، يُوصى بالالتزام بعناصر النظام لأنها تضمن الامتثال لـ HIG وتدعم إمكانية الوصول (VoiceOver, Dynamic Type) دون تهيئة إضافية.

أمثلة كود Form

لننشئ شاشة تسجيل باستخدام Form. يحتوي النموذج على أربعة أقسام: البيانات الشخصية، اختيار الدور، إعدادات الاشتراك، وزر الإرسال. يُستخدم Section للتجميع وعناصر التحكم القياسية في SwiftUI.

struct RegistrationForm: View {
    @State private var name = ""
    @State private var email = ""
    @State private var role = "Developer"
    @State private var agreedToTerms = false

    let roles = ["Developer", "Designer", "Manager"]

    var body: some View {
        NavigationStack {
            Form {
                Section(header: Text("معلومات شخصية")) {
                    TextField("Name", text: $name)
                    TextField("Email", text: $email)
                        .keyboardType(.emailAddress)
                }

                Section(header: Text("الدور")) {
                    Picker("Select role", selection: $role) {
                        ForEach(roles, id: \.self) { role in
                            Text(role).tag(role)
                        }
                    }
                }

                Section {
                    Toggle("Agree to terms", isOn: $agreedToTerms)
                }

                Section {
                    Button("تسجيل") {
                        submitForm()
                    }
                    .disabled(!agreedToTerms)
                }
            }
            .navigationTitle("Registration")
        }
    }

    private func submitForm() { }
}

النموذج مقسم إلى أربعة Section: البيانات الشخصية مع حقلَي نص، اختيار الدور عبر Picker، الموافقة على الشروط عبر Toggle، وزر التسجيل. الزر معطل حتى يوافق المستخدم على الشروط — هذا مثال على التحقق داخل Form. NavigationStack يضيف عنواناً ويسمح لـ Picker بفتح شاشة اختيار منفصلة على iOS.

نموذج إعدادات بأقسام فرعية

struct SettingsForm: View {
    @State private var volume: Double = 0.5
    @State private var isDarkMode = false
    @State private var reminderDate = Date()

    var body: some View {
        NavigationStack {
            Form {
                Section(header: Text("المظهر")) {
                    Toggle("Dark mode", isOn: $isDarkMode)
                    Slider(value: $volume, in: 0...1) {
                        Text("مستوى الصوت")
                    }
                }

                Section(header: Text("التذكيرات"),
                        footer: Text("ستتلقى إشعاراً في الوقت المحدد")) {
                    DatePicker("Remind at",
                        selection: $reminderDate,
                        displayedComponents: .hourAndMinute)
                }

                Section {
                    NavigationLink("Advanced Settings",
                        destination: AdvancedSettingsView())
                }
            }
            .navigationTitle("Settings")
        }
    }
}

هذا المثال يوضح مزيجاً من Slider وDatePicker وNavigationLink داخل Form. DatePicker يستخدم وضع hourAndMinute لعرض الوقت فقط. NavigationLink في القسم الأخير ينشئ انتقالاً إلى شاشة إعدادات متقدمة — نمط شائع لواجهات شبيهة بالإعدادات. رؤوس وتذييلات الأقسام تجعل النموذج موثقاً ذاتياً: يفهم المستخدم فوراً أي مجموعة ينتمي إليها كل عنصر تحكم.