SwiftUI में Form: यह क्या है, फ़ॉर्म बनाना और कॉन्फ़िगर करना

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

Form एक विशेष SwiftUI कंटेनर है जो इनपुट फ़ॉर्म और सेटिंग्स स्क्रीन बनाने के लिए डिज़ाइन किया गया है। यह List के व्यवहार को प्राप्त करता है लेकिन प्लेटफ़ॉर्म-विशिष्ट शैलियाँ जोड़ता है: iOS पर, Form गोल कोनों वाली grouped तालिका के रूप में प्रदर्शित होता है; macOS पर, यह चेकबॉक्स और नियंत्रणों के साथ एक मानक सिस्टम सूची के रूप में दिखाई देता है।

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

Form सभी मानक SwiftUI इनपुट तत्वों का समर्थन करता है: टेक्स्ट के लिए TextField, पासवर्ड के लिए SecureField, सूची चयन के लिए Picker, चालू/बंद के लिए Toggle, रेंज के लिए Slider, क्रमिक मानों के लिए Stepper और तिथियों के लिए DatePicker। प्रत्येक तत्व स्वचालित रूप से लक्ष्य प्लेटफ़ॉर्म पर Apple के HIG (Human Interface Guidelines) के अनुरूप शैली प्राप्त करता है।

Form बनाम List: कंटेनर तुलना

अपनी दृश्य समानता के बावजूद, Form और List अलग-अलग कार्यों को हल करते हैं। List स्वाइप क्रियाओं और पंक्ति संपादन क्षमताओं के साथ स्क्रॉल करने योग्य डेटा सूचियों को प्रदर्शित करने के लिए एक सार्वभौमिक कंटेनर है। Form डेटा इनपुट और सेटिंग्स के लिए एक विशेष कंटेनर है, जो सिस्टम नियंत्रण शैलियों के लिए अनुकूलित है।

List गतिशील डेटा प्रदर्शित करने के लिए उपयुक्त है: समाचार फ़ीड, चैट, उत्पाद सूची। Form फ़ील्ड के पूर्वानुमानित सेट वाली स्थिर स्क्रीन के लिए है: उपयोगकर्ता प्रोफ़ाइल, ऐप सेटिंग्स, पंजीकरण फ़ॉर्म। मुख्य अंतर: Form तत्व इंटरैक्टिव नियंत्रण हो सकते हैं, जबकि List पंक्तियाँ अधिकतर डेटा प्रदर्शित करती हैं और नेविगेशन या क्रिया के साथ टैप पर प्रतिक्रिया करती हैं।

Apple Human Interface Guidelines (2025) के अनुसार, Form का उपयोग सेटिंग्स और इनपुट स्क्रीन के लिए किया जाना चाहिए जहाँ एक स्क्रीन पर 3 से 20 नियंत्रण हों और उन्हें सेक्शन में विभाजित करने से उपयोगिता में सुधार होता है।

Form के अंदर Section

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» समूह के नीचे स्पष्टीकरण के साथ दो टॉगल रखता है। फ़ुटर स्वचालित रूप से स्पेसिंग जोड़ता है और caption फ़ॉन्ट शैली का उपयोग करता है। एक Section में बिना हेडर के फ़ुटर या बिना फ़ुटर के हेडर हो सकता है।

Form में नियंत्रण

Form सभी मानक SwiftUI इनपुट तत्वों का समर्थन करता है। Picker Form में स्वचालित रूप से iOS पर एक अलग चयन स्क्रीन में संक्रमण के साथ नेविगेशन पंक्ति के रूप में प्रदर्शित होता है। Toggle दाईं ओर संरेखित स्विच के साथ एक पंक्ति के रूप में दिखाई देता है। TextField प्लेसहोल्डर के साथ सिस्टम इनपुट शैली प्राप्त करता है।

संख्यात्मक मानों के लिए, 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")
        }
    }
}

यह उदाहरण Form के अंदर Slider, DatePicker और NavigationLink के संयोजन को प्रदर्शित करता है। DatePicker केवल समय प्रदर्शित करने के लिए hourAndMinute मोड का उपयोग करता है। अंतिम सेक्शन में NavigationLink उन्नत सेटिंग्स स्क्रीन पर संक्रमण बनाता है — Settings-जैसे इंटरफ़ेस के लिए एक सामान्य पैटर्न। सेक्शन हेडर और फ़ुटर फ़ॉर्म को स्व-दस्तावेज़ीकृत बनाते हैं: उपयोगकर्ता तुरंत समझ जाता है कि प्रत्येक नियंत्रण किस समूह से संबंधित है।