Section في SwiftUI: ما هي، إنشاء الأقسام والتجميع

ما هي Section في SwiftUI؟

Section هو مcomponent هيكلي في SwiftUI مصمم لتجميع العناصر داخل حاويات Form و List. على عكس VStack أو HStack، تضيف Section هوامش نظامية، رأساً وتذييلاً، بالإضافة إلى تمييز بصري للمجموعة على شكل كتلة ذات زوايا مدورة على iOS.

Section لا تغير سلوك العناصر الفرعية — بل تنظم عرضها فقط. جميع عناصر التحكم داخل Section — Picker، Toggle، TextField — تعمل كالمعتاد، ولكنها مدمجة بصرياً في مجموعة منطقية. هذا مهم بشكل خاص لـ النماذج التي تظهر على الشاشة حيث يحتاج المستخدم إلى التوجيه السريع في هيكل إدخال البيانات.

يدير النظام تلقائياً الهوامش بين الأقسام: المسافة بين Section على iOS تتراوح من 16–20 نقطة، وبين العناصر داخل Section تكون 0 (فاصل بين الصفوف). لا يمكن للمطور تغيير هذه الهوامش عبر معدّلات padding — فهي مضبوطة من قبل النظام لضمان مظهر موحد.

رأس وتذييل Section

تقبل Section معلمتين اختياريتين: header — عنوان المجموعة، و footer — نص توضيحي أسفل المجموعة. يُعرض الرأس فوق عناصر القسم بخط عريض من نمط caption، والتذييل بخط أصغر بلون رمادي. تقبل كلا المعلمتين أي SwiftUI View، وليس فقط Text.

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

Section(
    header: Text("Account Security"),
    footer: Text("Use a strong password with at least 8 characters.")
) {
    SecureField("Current password", text: $currentPassword)
    SecureField("New password", text: $newPassword)
}

في المثال، Section لها رأس «Account Security» وتذييل مع نصيحة أمان كلمة المرور. يرى المستخدم الرأس كـ تسمية قسم، يملأ حقلين، ويقرأ التحذير أسفلهما فوراً. هذا الهيكل يحسن تجربة المستخدم لأن جميع المعلومات عن القسم موجودة على شاشة واحدة دون الحاجة إلى التنقل إلى صفحة تعليمات منفصلة.

Section داخل Form و List

تعمل Section داخل كل من Form و List، لكن التمثيل المرئي يختلف. في Form، تُعرض Section ككتلة ذات زوايا مدورة وخلفية نظامية، مفصولة عن الأقسام المجاورة بهوامش. في List، يمكن أن تستخدم Section النمط plain — بدون خلفية وزوايا مدورة، أو inset-grouped — مع كتل مدورة مشابهة لـ Form.

يؤثر اختيار الحاوية على نمط Section. إذا وضعت Section بنفس المحتوى داخل Form و List بنمط .insetGrouped، ستكون النتيجة متطابقة. لكن Form تضيف هوامش نظامية وتستخدم النمط grouped افتراضياً، بينما تتطلب List تحديد النمط صراحة عبر المعدّل .listStyle(.insetGrouped).

لتحقيق نفس المظهر في List، استخدم .listStyle(.insetGrouped). هذا النمط يحاكي مظهر Form ومناسب لشاشات الإعدادات المبنية على List. للقوائم القياسية للبيانات، استخدم .plain — بدون تمييز الأقسام، مع فواصل رفيعة بين الصفوف.

محتوى ديناميكي مع ForEach

Section يمكن أن تحتوي على عدد ديناميكي من العناصر عبر ForEach. هذا يسمح بإنشاء مجموعات بعناصر متكررة مع الحفاظ على الرأس والتذييل للمجموعة بأكملها. يقوم ForEach داخل Section بالتكرار على مجموعة بيانات وإنشاء Views فرعية لكل عنصر دون كسر هيكل القسم.

الأقسام الديناميكية مفيدة لشاشات الإعدادات بعدد متغير من الخيارات: قائمة اللغات المتاحة، الأجهزة المتصلة، أو الاشتراكات في الإشعارات. يبقى رأس القسم ثابتاً بينما يتغير المحتوى حسب البيانات.

struct DynamicSectionView: View {
    let categories = ["Work", "Personal", "Finance", "Health"]
    @State private var selected = Set<String>()

    var body: some View {
        Form {
            Section(header: Text("Categories"),
                    footer: Text("Select your preferred categories")) {
                ForEach(categories, id: \.self) { category in
                    Toggle(category, isOn: Binding(
                        get: { selected.contains(category) },
                        set: { if $0 { selected.insert(category) }
                                     else { selected.remove(category) } }
                    ))
                }
            }

            Section {
                Text("Selected: \(selected.count) categories")
                    .foregroundStyle(.secondary)
            }
        }
    }
}

في هذا المثال، يقوم ForEach بإنشاء Toggle لكل فئة من مصفوفة categories. يتم تعيين رأس وتذييل القسم مرة واحدة ويطبقان على المجموعة بأكملها. يعرض القسم الثاني عدد الفئات المحددة — لا يعتمد على ForEach ويبقى ثابتاً. هذا النهج يتيح إنشاء نماذج مرنة حيث يضع الرأس والتذييل مجموعة العناصر الديناميكية في سياقها.

أمثلة كود Section

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

struct ProfileView: View {
    @State private var displayName = "Alex Johnson"
    @State private var bio = "iOS developer"
    @State private var isProfilePublic = true
    @State private var showEmail = false

    var body: some View {
        Form {
            Section(header: Text("Profile Info")) {
                TextField("Display name", text: $displayName)
                TextField("Bio", text: $bio, axis: .vertical)
                    .lineLimit(3)
            }

            Section(header: Text("Privacy")) {
                Toggle("Public profile", isOn: $isProfilePublic)
                Toggle("Show email", isOn: $showEmail)
                    .disabled(!isProfilePublic)
            }

            Section(header: Text("Stats"),
                    footer: Text("Last updated today at 2:30 PM")) {
                LabeledContent("Posts", value: "42")
                LabeledContent("Followers", value: "1,280")
                LabeledContent("Following", value: "346")
            }
        }
        .navigationTitle("Profile")
    }
}

ثلاثة Section تفصل بوضوح المناطق الوظيفية: حقول الملف الشخصي القابلة للتحرير، مفاتيح الخصوصية، والإحصائيات. يوضح القسم الثاني التحقق من الصحة: مفتاح «Show email» معطل حتى يصبح الملف الشخصي عاماً. تذييل القسم الثالث يظهر وقت آخر تحديث — مثال على استخدام التذييل لمعلومات سياقية إضافية. LabeledContent هو مكون SwiftUI قياسي لعرض أزواج المفتاح-القيمة في Form.

Section برأس مخصص

Section(
    header: HStack {
        Image(systemName: "bell.fill")
            .foregroundStyle(.blue)
        Text("Notifications")
            .font(.headline)
    },
    footer: Text("Manage push and email alerts")
) {
    Toggle("Push notifications", isOn: $push)
    Toggle("Email notifications", isOn: $email)
    Stepper("Quiet hours: \(quietStart) — \(quietEnd)",
            value: $quietStart,
            in: 0...23)
}

يوضح هذا المثال أن header يمكن أن يكون أي SwiftUI View. استخدام HStack مع Image و Text يضيف أيقونة بجانب الرأس، مما يجعل القسم أكثر تعبيراً بصرياً. الرؤوس المخصصة مفيدة لتسليط الضوء على الأقسام المهمة في الواجهة: إعدادات الإشعارات، الميزات المدفوعة، أو الأقسام ذات التحذيرات. ومع ذلك، لا ينصح بالإفراط في استخدام الرؤوس المخصصة — 1–2 قسم بتنسيق غير قياسي لكل شاشة يكفي للحفاظ على اتساق الواجهة.