SwiftUI में Section: यह क्या है, सेक्शन बनाना और समूहीकरण

SwiftUI में Section क्या है?

Section SwiftUI का एक संरचनात्मक कम्पोनेंट है जो Form और List कंटेनरों के अंदर तत्वों को समूहित करने के लिए डिज़ाइन किया गया है। VStack या HStack के विपरीत, Section सिस्टम स्पेसिंग, शीर्षक और पाद, साथ ही iOS पर गोल कोनों वाले ब्लॉक के रूप में विज़ुअल ग्रुप हाइलाइटिंग जोड़ता है।

Section चाइल्ड तत्वों के व्यवहार को नहीं बदलता — यह केवल उनकी प्रस्तुति को व्यवस्थित करता है। Section के अंदर सभी नियंत्रण — Picker, Toggle, TextField — सामान्य रूप से काम करते हैं, लेकिन दृश्य रूप से एक तार्किक समूह में संयोजित होते हैं। यह विशेष रूप से स्क्रीन फॉर्म के लिए महत्वपूर्ण है जहाँ उपयोगकर्ता को डेटा प्रविष्टि संरचना में तुरंत अभिविन्यस्त होने की आवश्यकता होती है।

सिस्टम स्वचालित रूप से सेक्शन के बीच स्पेसिंग प्रबंधित करता है: iOS पर Section के बीच की दूरी 16–20 पॉइंट होती है, Section के अंदर तत्वों के बीच 0 (पंक्तियों के बीच विभाजक)। डेवलपर padding मॉडिफ़ायर के माध्यम से इन स्पेसिंग को बदल नहीं सकता — वे एक समान दिखावट सुनिश्चित करने के लिए सिस्टम द्वारा नियंत्रित होते हैं।

Section का शीर्षक और पाद

Section दो वैकल्पिक पैरामीटर स्वीकार करता है: header — समूह का शीर्षक, और footer — समूह के नीचे व्याख्यात्मक पाठ। शीर्षक सेक्शन तत्वों के ऊपर बोल्ड कैप्शन-शैली फ़ॉन्ट में प्रदर्शित होता है, पाद छोटे फ़ॉन्ट में ग्रे रंग के साथ। दोनों पैरामीटर कोई भी 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” और पासवर्ड सुरक्षा सलाह के साथ एक पाद है। उपयोगकर्ता शीर्षक को सेक्शन लेबल के रूप में देखता है, दो फ़ील्ड भरता है, और तुरंत उनके नीचे चेतावनी पढ़ता है। यह संरचना UX में सुधार करती है क्योंकि सेक्शन के बारे में सभी जानकारी एक ही स्क्रीन पर है, बिना अलग सहायता पृष्ठ पर जाने की आवश्यकता के।

Form और List के अंदर Section

Section Form और List दोनों के अंदर काम करता है, लेकिन विज़ुअल प्रतिनिधित्व भिन्न होता है। Form में, Section को गोल कोनों और सिस्टम पृष्ठभूमि के साथ एक ब्लॉक के रूप में प्रदर्शित किया जाता है, जो स्पेसिंग द्वारा आसन्न सेक्शन से अलग होता है। List में, Section प्लेन शैली — बिना पृष्ठभूमि और गोल कोनों के, या 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 गैर-मानक शैली वाले सेक्शन पर्याप्त हैं।