SwiftUI میں Section: یہ کیا ہے، سیکشن بنانا اور گروپ کرنا

SwiftUI میں Section کیا ہے؟

Section SwiftUI کا ایک ساختی کمپونینٹ ہے جو Form اور List کنٹینرز کے اندر عناصر کو گروپ کرنے کے لیے ڈیزائن کیا گیا ہے۔ VStack یا HStack کے برعکس، Section سسٹم اسپیسنگ، ایک ہیڈر اور فوٹر، اور iOS پر گول کونوں والے بلاک کی شکل میں بصری گروپ ہائی لائٹنگ شامل کرتا ہے۔

Section چائلڈ عناصر کے رویے کو نہیں بدلتا — یہ صرف ان کی پیشکش کو منظم کرتا ہے۔ Section کے اندر تمام کنٹرولز — Picker، Toggle، TextField — معمول کے مطابق کام کرتے ہیں، لیکن بصری طور پر ایک منطقی گروپ میں شامل ہو جاتے ہیں۔ یہ خاص طور پر اسکرین فارمز کے لیے اہم ہے جہاں صارف کو ڈیٹا انٹری کے ڈھانچے میں تیزی سے رہنمائی حاصل کرنی ہوتی ہے۔

سسٹم خود بخود سیکشنز کے درمیان اسپیسنگ کا انتظام کرتا ہے: iOS پر Section کے درمیان فاصلہ 16–20 پوائنٹس ہے، Section کے اندر عناصر کے درمیان 0 (قطاروں کے درمیان جداکار)۔ ڈویلپر پیڈنگ موڈیفائر کے ذریعے ان اسپیسنگ کو تبدیل نہیں کر سکتا — یہ یکساں ظاہری شکل کو یقینی بنانے کے لیے سسٹم کے ذریعے کنٹرول کی جاتی ہیں۔

Section کا ہیڈر اور فوٹر

Section دو اختیاری پیرامیٹرز قبول کرتا ہے: header — گروپ کا عنوان، اور footer — گروپ کے نیچے وضاحتی متن۔ ہیڈر سیکشن عناصر کے اوپر بولڈ کیپشن اسٹائل فونٹ میں دکھایا جاتا ہے، فوٹر چھوٹے فونٹ میں بھوری رنگ میں۔ دونوں پیرامیٹرز صرف Text نہیں بلکہ کوئی بھی SwiftUI View قبول کرتے ہیں۔

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” ہے اور پاس ورڈ سیکیورٹی مشورے کے ساتھ ایک فوٹر ہے۔ صارف ہیڈر کو سیکشن لیبل کے طور پر دیکھتا ہے، دو فیلڈز بھرتا ہے، اور فوری طور پر ان کے نیچے انتباہ پڑھتا ہے۔ یہ ڈھانچہ UX کو بہتر بناتا ہے کیونکہ سیکشن کے بارے میں تمام معلومات ایک ہی اسکرین پر ہیں، علیحدہ مدد والے صفحے پر جانے کی ضرورت کے بغیر۔

Form اور List کے اندر Section

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 کے ذریعے متحرک تعداد میں عناصر پر مشتمل ہو سکتا ہے۔ یہ پورے گروپ کے لیے ہیڈر اور فوٹر کو برقرار رکھتے ہوئے دہرائے جانے والے عناصر کے ساتھ گروپ بنانے کی اجازت دیتا ہے۔ Section کے اندر ForEach ڈیٹا کلیکشن پر تکرار کرتا ہے اور سیکشن کے ڈھانچے کو توڑے بغیر ہر عنصر کے لیے چائلڈ 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 تیار کرتا ہے۔ سیکشن کا ہیڈر اور فوٹر ایک بار سیٹ کیا جاتا ہے اور پورے گروپ پر لاگو ہوتا ہے۔ دوسرا سیکشن منتخب زمرہ جات کی تعداد دکھاتا ہے — یہ 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 Form میں کلید-قدر کے جوڑے دکھانے کے لیے ایک معیاری SwiftUI کمپونینٹ ہے۔

کسٹم ہیڈر کے ساتھ 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 ہو سکتا ہے۔ Image اور Text کے ساتھ HStack استعمال کرنا ہیڈر کے ساتھ ایک آئیکن شامل کرتا ہے، جس سے سیکشن بصری طور پر زیادہ اظہار خیال بنتا ہے۔ کسٹم ہیڈر انٹرفیس میں اہم سیکشن کو نمایاں کرنے کے لیے مفید ہیں: اطلاع کی ترتیبات، ادائیگی کی خصوصیات یا انتباہ والے سیکشن۔ تاہم، کسٹم ہیڈر کے ضرورت سے زیادہ استعمال کی سفارش نہیں کی جاتی — انٹرفیس کی یکسانیت برقرار رکھنے کے لیے فی اسکرین 1–2 غیر معیاری اسٹائل والے سیکشن کافی ہیں۔