SwiftUI के 5 मुख्य संपत्ति रैपर और उन्हें प्रभावी ढंग से कैसे उपयोग करें

सुनो! मैं आपको SwiftUI के बारे में बताना चाहूंगा, जो iOS और macOS पर यूजर इंटरफेस बनाने के लिए एक रूपरेखा है। इसका उपयोग करना बहुत सुविधाजनक है क्योंकि यह प्रोग्रामिंग के लिए एक घोषणात्मक दृष्टिकोण का उपयोग करता है। SwiftUI के साथ, आप वर्णन कर सकते हैं कि आपका इंटरफ़ेस क्या करना चाहिए और कैसा दिखना चाहिए, और फ़्रेमवर्क बाकी का ध्यान रखेगा।

SwiftUI के प्रमुख तत्वों में से एक प्रॉपर्टी रैपर का उपयोग है। ये कार्यात्मक तत्व हैं जो आपको गुणों के लिए अतिरिक्त तर्क प्रदान करने की अनुमति देते हैं।

SwiftUI के पांच मुख्य प्रॉपर्टी रैपर हैं:

1. @राज्य

2. @ बंधन

3. @ObservedObject

4. @स्टेटऑब्जेक्ट

5. @पर्यावरण वस्तु

   
   

वे विकास में आपके सबसे अच्छे दोस्त बनेंगे।

@राज्य

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

 struct MyButton: View { @State var buttonColor = Color.blue var body: some View { Button("Press me!") { buttonColor = Color.red } .background(buttonColor) } }

@ बंधन

@बाइंडिंग आपको उस मान का उपयोग करने की अनुमति देता है जो कोड के एक भाग में कोड के दूसरे भाग में संग्रहीत होता है। यह आमतौर पर SwiftUI में एक दृश्य से दूसरे दृश्य में मान पास करने के लिए उपयोग किया जाता है, जिससे वे एक दूसरे के साथ बातचीत कर सकें। उदाहरण के लिए, कल्पना करें कि हमारे पास दो व्यू हैं - एक टेक्स्ट फ़ील्ड के साथ और दूसरा एक बटन के साथ। हम चाहते हैं कि जब उपयोगकर्ता बटन दबाए तो टेक्स्ट फ़ील्ड अपडेट हो जाए। ऐसा करने के लिए, हम @ बाइंडिंग का उपयोग कर सकते हैं:

 struct ContentView: View { @State private var text = "" var body: some View { VStack { TextField("Enter text", text: $text) Button("Update text") { text = "New text" } SecondView(text: $text) } } } struct SecondView: View { @Binding var text: String var body: some View { Text(text) } }

इस उदाहरण में, @Binding का उपयोग $text (जो ContentView में है) से टेक्स्ट (जो कि SecondView में है) से मान पास करने के लिए किया जाता है, इसलिए जब उपयोगकर्ता बटन दबाता है, तो टेक्स्ट फ़ील्ड अपडेट हो जाएगा और नया टेक्स्ट प्रदर्शित करेगा।

@ObservedObject

@ObservedObject का उपयोग उन गुणों को चिह्नित करने के लिए किया जाता है जो देखे गए हैं और बाहरी डेटा परिवर्तनों के आधार पर बदल सकते हैं। यह संपत्ति आवरण उस वस्तु में परिवर्तन की सदस्यता लेता है जो ऑब्जर्वेबलऑब्जेक्ट प्रोटोकॉल के अनुरूप होता है और यदि डेटा बदल गया है तो इंटरफ़ेस के संबंधित भागों को स्वचालित रूप से अपडेट करता है। यहाँ @ObservedObject का उपयोग करने का एक संक्षिप्त उदाहरण दिया गया है:

 class UserData: ObservableObject { @Published var name = "John" } struct ContentView: View { @ObservedObject var userData = UserData() var body: some View { VStack { Text("Hello, \(userData.name)!") TextField("Enter your name", text: $userData.name) } } }

इस उदाहरण में, हम UserData नामक एक वर्ग बनाते हैं, जिसमें एक @Published नाम होता है। ContentView संरचना में, हम @ObservedObject का उपयोग करके UserData प्रकार के साथ UserData नामक एक संपत्ति बनाते हैं। हम टेक्स्ट फ़ील्ड में userData.name का मान प्रदर्शित करते हैं और इसे स्क्रीन पर आउटपुट करते हैं।

जब उपयोगकर्ता टेक्स्ट फ़ील्ड में मान बदलता है, तो SwiftUI स्वचालित रूप से इंटरफ़ेस के संबंधित भाग को अपडेट करता है, क्योंकि नाम गुण प्रकाशित होता है और @Published का उपयोग करके देखा जाता है। इसका मतलब है कि इंटरफ़ेस को अपडेट करने के लिए हमें अपने कोड की आवश्यकता नहीं है, और हम SwiftUI को हमारे लिए ऐसा करने की अनुमति देते हैं।

नोट: यदि आप नहीं जानते हैं, तो @Published कम्बाइन फ्रेमवर्क से एक प्रॉपर्टी रैपर है जिसे क्लास या स्ट्रक्चर प्रॉपर्टी में जोड़ा जा सकता है, जो उस प्रॉपर्टी के मूल्य में किसी भी बदलाव की सूचना स्वचालित रूप से किसी को भी भेजता है जिसने इसकी सदस्यता ली है . दूसरे शब्दों में, यह उन संपत्तियों के लिए सहायक विशेषता है जिन्हें परिवर्तनों के लिए ट्रैक किया जा सकता है।

@स्टेटऑब्जेक्ट

@StateObject एक प्रॉपर्टी रैपर है जिसका उपयोग क्लास ऑब्जेक्ट को इनिशियलाइज़ करने और इसे SwiftUI में व्यू स्टेट में स्टोर करने के लिए किया जाता है। इसका मतलब यह है कि वस्तु तब तक संग्रहीत होती है जब तक दृश्य मौजूद रहता है और उसके साथ नष्ट हो जाता है। आमतौर पर, @StateObject का उपयोग क्लास ऑब्जेक्ट्स के लिए अधिक व्यावहारिक होता है, जो केवल एक ही नहीं, बल्कि कई दृश्यों के लिए आवश्यक होता है। उदाहरण के लिए:

 class UserData: ObservableObject { @Published var name = "John" @Published var age = 30 } struct ContentView: View { @StateObject var userData = UserData() var body: some View { NavigationView { VStack { Text("Name: \(userData.name)") Text("Age: \(userData.age)") NavigationLink( destination: ProfileView(userData: userData), label: { Text("Edit Profile") }) } .navigationTitle("Home") } } } struct ProfileView: View { @ObservedObject var userData: UserData var body: some View { Form { TextField("Name", text: $userData.name) Stepper("Age: \(userData.age)", value: $userData.age) } .navigationTitle("Profile") } }

इस उदाहरण में, UserData एक वर्ग का एक ऑब्जेक्ट है जिसमें कई गुण हैं जिनका उपयोग कई दृश्यों में किया जा सकता है। वर्ग को ऑब्जर्वेबलऑब्जेक्ट के रूप में चिह्नित किया गया है, इसलिए इसका उपयोग @StateObject और @ObservedObject के साथ किया जा सकता है।

ContentView में, हम विभिन्न दृश्यों के बीच संक्रमण के बीच स्थिति को बचाने के लिए @StateObject का उपयोग करके एक नया UserData ऑब्जेक्ट बनाते हैं। इस मामले में, ContentView उपयोगकर्ता डेटा प्रदर्शित करता है, इसकी कल्पना करता है, और इसमें एक अन्य दृश्य (ProfileView) का लिंक होता है जिसका उपयोग उपयोगकर्ता डेटा को संपादित करने के लिए किया जा सकता है।

ProfileView में, हम उपयोगकर्ता डेटा को संशोधित करने के लिए @ObservedObject का उपयोग करके समान UserData ऑब्जेक्ट तक पहुंच प्राप्त करते हैं। जब उपयोगकर्ता डेटा बदलता है, तो यह स्वचालित रूप से ContentView में अपडेट हो जाता है क्योंकि उसी UserData ऑब्जेक्ट का उपयोग किया जाता है।

नोट: यदि आपको किसी क्लास ऑब्जेक्ट में एक दृश्य से परिवर्तन देखने की आवश्यकता है तो @ObservedObject का उपयोग करें और यदि आपको एक क्लास ऑब्जेक्ट की स्थिति को बचाने की आवश्यकता है जो कई दृश्यों के प्रदर्शन को प्रभावित करता है।

यदि आप एकाधिक दृश्यों में आवश्यक ऑब्जेक्ट के लिए @StateObject के बजाय @ObservedObject का उपयोग करते हैं, तो प्रत्येक दृश्य के पास ऑब्जेक्ट का अपना उदाहरण होगा, जिससे दृश्यों के बीच डेटा सिंक्रनाइज़ेशन में समस्या हो सकती है। इसलिए, इस मामले में @StateObject का उपयोग करना बेहतर है।

@पर्यावरण वस्तु

@EnvironmentObject, SwiftUI व्यू पदानुक्रम के माध्यम से डेटा ऑब्जेक्ट की जांच करने के लिए एक प्रॉपर्टी रैपर है। यह पर्यावरण कंटेनर (जैसे, दृश्य, दृश्य, ऐप, आदि) से संबंधित SwiftUI पदानुक्रम में किसी भी दृश्य से डेटा ऑब्जेक्ट तक पहुंच की अनुमति देता है। उदाहरण के लिए, कल्पना करें कि हमारे पास एक कार्य सूची प्रबंधन ऐप है। हमारे पास रूट ContentView हो सकता है जिसमें कार्यों की सूची और नए कार्य बनाने की क्षमता हो। इसके लिए, हम एक अलग कार्य सूची दृश्य बनाते हैं जो कार्यों की सूची और नए कार्यों को जोड़ने के लिए एक बटन प्रदर्शित करता है। एक नया कार्य जोड़ने के बाद, उपयोगकर्ता को कार्य जोड़ें स्क्रीन पर पुनर्निर्देशित किया जाना चाहिए, इसलिए हम एक अलग AddTaskView दृश्य बनाते हैं।

UserManager ऑब्जेक्ट को सभी तीन दृश्यों में पास करने के लिए, हम इसका उदाहरण ContentView में बना सकते हैं, और फिर इसे TaskListView और AddTaskView दोनों के पैरामीटर के रूप में पास कर सकते हैं। हालाँकि, यह एक समस्या बन सकती है यदि हम और अधिक नेस्टेड दृश्य जोड़ने का निर्णय लेते हैं, क्योंकि हमें कई मध्यवर्ती दृश्यों के माध्यम से UserManager को पारित करने की आवश्यकता होगी।

इसके बजाय, हम व्यू पदानुक्रम के माध्यम से UserManager को पास करने के लिए @EnvironmentObject का उपयोग कर सकते हैं। इस तरह, वे सभी विचार जिन्हें UserManager तक पहुंच की आवश्यकता है, वे बस इसे @EnvironmentObject के रूप में घोषित कर सकते हैं और आवश्यकतानुसार इसका उपयोग कर सकते हैं।

 struct TaskManagerApp: App { @StateObject var userManager = UserManager() var body: some Scene { WindowGroup { ContentView() .environmentObject(userManager) } } } struct ContentView: View { var body: some View { NavigationView { TaskListView() } } } struct TaskListView: View { @EnvironmentObject var userManager: UserManager var body: some View { List(userManager.tasks) { task in TaskRow(task: task) } .navigationBarTitle("Tasks") .navigationBarItems(trailing: Button(action: { // Navigate to AddTaskView }) { Image(systemName: "plus") } ) } } struct AddTaskView: View { @EnvironmentObject var userManager: UserManager var body: some View { // Add new task using userManager } }

तो, अब UserManager ऑब्जेक्ट स्वचालित रूप से TaskListView और AddTaskView को @EnvironmentObject के माध्यम से पास कर दिया जाएगा। ध्यान दें कि हम UserManager की स्थिति को एक दृश्य में संशोधित कर सकते हैं, और परिवर्तन स्वचालित रूप से दूसरे दृश्य में दिखाई देंगे।

लेख में बुनियादी SwiftUI संपत्ति आवरण शामिल हैं: @State, @Binding, @ObservedObject, @StateObject, @EnvironmentObject।

ये प्रॉपर्टी रैपर SwiftUI में ऐप स्टेट के साथ काम करने की नींव बनाते हैं। स्विफ्टयूआई के साथ ऐप्स विकसित करने के लिए आवश्यक बुनियादी संपत्ति रैपर को अपनी उंगलियों पर रखने के लिए इस लेख को एक चीट शीट के रूप में उपयोग करें। इस ज्ञान को लागू करके, आप गतिशील रूप से बदलते राज्यों के साथ और अधिक जटिल उपयोगकर्ता इंटरफ़ेस बनाने में सक्षम होंगे और अपने मॉडल से डेटा को SwiftUI में एकीकृत कर सकेंगे।