🦁 😁 🥡 SwiftUI में @EnvironmentObject का उपयोग करते हुए विचारों के बीच नेविगेट करना 🕒 👲🏼 💪🏼

लेख का अनुवाद उन्नत पाठ्यक्रम "आईओएस डेवलपर" के लॉन्च की पूर्व संध्या पर तैयार किया गया था ।

नमस्कार और हमारे ट्यूटोरियल में आपका स्वागत है! इस श्रृंखला में, हम बात करते हैं कि स्विफ्टयूआई में विचारों के बीच कैसे नेविगेट करें (नेविगेशन दृश्य का उपयोग किए बिना!)। हालांकि यह विचार तुच्छ लग सकता है, लेकिन इसे थोड़ा और गहराई से समझने पर, हम स्विफ्टयूआई में उपयोग किए जाने वाले डेटा प्रवाह अवधारणाओं के बारे में बहुत कुछ सीख सकते हैं।

पिछले भाग में, हमने सीखा कि इसका उपयोग कैसे किया जाए @ObservableObject। इस भाग में, हम इसे कैसे करें, लेकिन अधिक कुशलतापूर्वक @EnvironmentObject का उपयोग करके देखेंगे। हम एक छोटे से संक्रमण एनीमेशन को भी जोड़ने जा रहे हैं।

यहाँ हम क्या हासिल करने जा रहे हैं:

हमारे पास क्या है

इसलिए, हमने अभी यह पता लगाया है कि ओब्जर्वेबल ओब्जेक्ट के उपयोग से विभिन्न विचारों के बीच कैसे नेविगेट किया जाए। संक्षेप में, हमने एक व्यू राउटर बनाया और इसे मदर व्यू और हमारे कंटेंट व्यू के साथ जोड़ा। इसके बाद, हम सामग्री दृश्य बटन पर क्लिक करके करंट व्यू व्यू राउटर की संपत्ति में हेरफेर करते हैं। उसके बाद, संबंधित सामग्री दृश्य प्रदर्शित करने के लिए MotherView अपडेट किया जाता है!

लेकिन इस कार्यक्षमता को प्राप्त करने के लिए एक और अधिक कुशल तरीका है: उपयोग @EnvironmentObject!

संकेत: आप यहां नवीनतम घटनाक्रम डाउनलोड कर सकते हैं (यह "NavigateInwiftUIComplete" फ़ोल्डर है) : HitHub

क्यों उपयोग `ObservableObject`सबसे अच्छा समाधान नहीं है

आप शायद सोच रहे हैं: हमें इसे किसी अन्य तरीके से क्यों लागू करना चाहिए, जब हमारे पास पहले से ही एक कार्यशील समाधान है? ठीक है, यदि आप हमारे आवेदन के पदानुक्रम के तर्क को देखते हैं, तो यह आपके लिए स्पष्ट हो जाएगा। हमारा MotherView रूट दृश्य है जो ViewRouter उदाहरण को प्रारंभ करता है। MotherView में, हम ContentViewA और ContentViewB को भी इनिशियलाइज़ करते हैं, उन्हें ViewRouter इंस्टेंस को एक BindableObject के रूप में पास करते हैं।

जैसा कि आप देख सकते हैं, हमें एक सख्त पदानुक्रम का पालन करना चाहिए जो सभी सबव्यू के लिए एक प्रारंभिक ऑब्जर्वेबल ऑबजेक्ट डाउनस्ट्रीम से गुजरता है। अब यह इतना महत्वपूर्ण नहीं है, लेकिन बहुत सारे विचारों के साथ अधिक जटिल अनुप्रयोग की कल्पना करें। हमें सभी प्रारंभिक साक्षात्कारों और सभी साक्षात्कारों, आदि के प्रारंभिक अवलोकन योग्य अवलोकन के प्रसारण का ट्रैक रखने की आवश्यकता है, जो अंततः एक कठिन कार्य बन सकता है।

संक्षेप में: ObservableObjectअधिक जटिल अनुप्रयोग पदानुक्रम की बात आने पर स्वच्छ का उपयोग करना समस्याग्रस्त हो सकता है।

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

क्या है `EnvironmentObject`?

EnvironmentObjectएक डेटा मॉडल है, जो आरंभीकरण के बाद, आपके एप्लिकेशन के सभी अभ्यावेदन के साथ डेटा का आदान-प्रदान कर सकता है। क्या विशेष रूप से अच्छा है जो EnvironmentObjectप्रदान करके बनाया गया है ObservableObject, इसलिए हम अपने ViewRouterबनाने के लिए उपयोग कर सकते हैं EnvironmentObject!

जैसे ही हमने अपना घोषित ViewRouterकिया EnvironmentObject, सभी विचारों को इसके साथ-साथ सामान्य लोगों के साथ जोड़ा जा सकता है ObservableObject, लेकिन आवेदन पदानुक्रम नीचे प्रारंभिक आरम्भ की श्रृंखला की आवश्यकता के बिना!

जैसा कि पहले ही उल्लेख किया गया है, इसे EnvironmentObjectपहले से ही पहली बार एक्सेस किया जाना चाहिए। चूंकि हमारा MotherView, रूट दृश्य के रूप में, संपत्ति को देखेगा CurrentPage ViewRouter, इसलिए EnvironmentObjectआवेदन शुरू होने पर हमें इसे शुरू करना होगा । तब हम करंटपेज को स्वचालित रूप से बदल सकते हैंEnvironmentObjectकी ContentViewहै, जो तब कॉल MotherViewफिर से प्रतिपादन के लिए।

के `ViewRouter`रूप में क्रियान्वयन`EnvironmentObject`

तो, चलो हमारे आवेदन का कोड अपडेट करें!

सबसे पहले, संपत्ति का आवरण बदल viewRouterअंदर MotherViewसे @ObservableObjectकरने के लिए @EnvironmentObject।

import SwiftUI

struct MotherView : View {
@EnvironmentObject var viewRouter: ViewRouter
var body: some View {
//...
    }
}

संपत्ति viewRouterअब लग रही है ViewRouter-EnvironmentObject। इस प्रकार, हमें MotherView_Previewsउचित उदाहरण के साथ अपनी संरचना प्रदान करने की आवश्यकता है :

#if DEBUG
struct MotherView_Previews : PreviewProvider {
    static var previews: some View {
        MotherView().environmentObject(ViewRouter())
    }
}
#endif

जैसा कि ऊपर उल्लेख किया गया है - हमारे आवेदन शुरू करते समय, इसे तुरंत ViewRouterगुणवत्ता में एक उदाहरण के साथ प्रदान किया जाना चाहिए EnvironmentObject, क्योंकि यह MotherViewअब रूट प्रतिनिधित्व के रूप में संदर्भित करता है EnvironmentObject। इसलिए, फ़ाइल के अंदर दृश्य फ़ंक्शन SceneDelegage.swiftको निम्नानुसार अपडेट करें :

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        if let windowScene = scene as? UIWindowScene {
            let window = UIWindow(windowScene: windowScene)
            window.rootViewController = UIHostingController(rootView: MotherView().environmentObject(ViewRouter()))
            self.window = window
            window.makeKeyAndVisible()
        }
    }

महान, अब जब आप आवेदन शुरू करते हैं, तो SwiftUI ViewRouterगुणवत्ता में एक उदाहरण बनाता है EnvironmentObject, जिससे हमारे आवेदन के सभी विचार अब संलग्न किए जा सकते हैं।

इसके बाद, हमारा अपडेट करें ContentViewA। इसकी viewRouterसंपत्ति बदलें EnvironmentObjectऔर संरचना को भी अपडेट करें ContentViewA_Previews।

import SwiftUI

struct ContentViewA : View {
    
    @EnvironmentObject var viewRouter: ViewRouter
    
    var body: some View {
       //...
    }
}
#if DEBUG
struct ContentViewA_Previews : PreviewProvider {
    static var previews: some View {
        ContentViewA().environmentObject(ViewRouter())
    }
}
#endif

संकेत: फिर से, संरचना ContentViewsA_Previewsका अपना उदाहरण है ViewRouter, लेकिन ContentViewAजब एप्लिकेशन लॉन्च किया गया था, तो यह उस उदाहरण से जुड़ा है!

इसके लिए इसे दोहराएं ContentViewB:

import SwiftUI

struct ContentViewB : View {
    
    @EnvironmentObject var viewRouter: ViewRouter
    
    var body: some View {
        //...
    }
}
#if DEBUG
struct ContentViewB_Previews : PreviewProvider {
    static var previews: some View {
        ContentViewB().environmentObject(ViewRouter())
    }
}
#endif

चूंकि viewRouterहमारे गुण कर रहे हैं ContentViewअब सीधे से संबंधित / प्रारंभिक उदाहरण का पालन ViewRouterके रूप में EnvironmentObject, हम अब उन्हें हमारा में प्रारंभ करने की जरूरत है MotherView। तो, चलिए अपडेट करते हैं हमारा MotherView:

struct MotherView : View {
    
    @EnvironmentObject var viewRouter: ViewRouter
    
    var body: some View { 
        VStack {
            if viewRouter.currentPage == "page1" {
                ContentViewA()
            } else if viewRouter.currentPage == "page2" {
                ContentViewB()
            }
        }
    }
}

यह सिर्फ बहुत अच्छा है: हमें अब ViewRouterहमारे अंदर इनिशियलाइज़ करने की जरूरत नहीं है MotherViewऔर इसके उदाहरण को ContentView के पास भेज दें, जो बहुत ही कुशल हो सकता है, खासकर अधिक जटिल पदानुक्रमों के लिए।

महान, चलो हमारे एप्लिकेशन को चलाएं और देखें कि यह कैसे काम करता है।

महान, हम अभी भी अपने विचारों के बीच आगे बढ़ सकते हैं!

संक्रमण एनिमेशन जोड़ना

एक बोनस के रूप में, आइए देखें कि "पेज 1" से "पेज 2" पर स्विच करते समय एक संक्रमण एनीमेशन कैसे जोड़ा जाए।

SwiftUI में, यह काफी सरल है।
को देखो willChangeविधि है जिसे हम कहते हैं ViewRouter.swiftजब CurrentPageअद्यतन किया गया। जैसा कि आप पहले से ही जानते हैं, यह MotherViewआपके शरीर को फिर से प्रदर्शित करने के लिए एक बंधन का कारण बनता है , अंततः एक और दिखा रहा है ContentView, जिसका अर्थ है दूसरे के लिए आगे बढ़ना ContentView। हम willChangeकिसी फ़ंक्शन में केवल विधि को लपेटकर एनीमेशन जोड़ सकते हैं withAnimation:

var currentPage: String = "page1" {
        didSet {
            withAnimation() {
                willChange.send(self)
            }
        }
    }

अब हम दूसरे को प्रदर्शित करते समय एक संक्रमण एनीमेशन जोड़ सकते हैं Content View।

"WithAnimation (_: _ :) - प्रदान किए गए एनीमेशन के साथ दृश्य निकाय के पुनर्गणना का परिणाम देता है"
Apple

हम जब से नेविगेट एक पॉप-अप संक्रमण के साथ हमारे आवेदन प्रदान करना चाहते हैं ContentViewAके लिए ContentViewB। ऐसा करने के लिए, फ़ाइल पर जाएं MotherView.swiftऔर जब कहा जाए तो ट्रांज़िशन संशोधक जोड़ें ContentViewB। आप कई पूर्वनिर्धारित संक्रमण प्रकारों में से किसी एक को चुन सकते हैं या अपना स्वयं का निर्माण भी कर सकते हैं (लेकिन यह एक अन्य लेख का विषय है)। पॉप-अप संक्रमण जोड़ने के लिए, हम एक प्रकार का चयन करते हैं .scale।

var body: some View {
        VStack {
            if viewRouter.currentPage == "page1" {
                ContentViewA()
            } else if viewRouter.currentPage == "page2" {
                ContentViewB()
                    .transition(.scale)
            }
        }
    }

यह कैसे काम करता है, यह देखने के लिए, अपने एप्लिकेशन को नियमित सिम्युलेटर में चलाएं:

कूल, हमने कोड के कुछ ही लाइनों में हमारे आवेदन के लिए एक अच्छा संक्रमण एनीमेशन जोड़ा!

आप यहाँ सभी सोर्स कोड डाउनलोड कर सकते हैं !

निष्कर्ष

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

नि: शुल्क सबक: "उपकरणों के साथ तेजी से आईओएस एप्लिकेशन"

SwiftUI में @EnvironmentObject का उपयोग करते हुए विचारों के बीच नेविगेट करना

हमारे पास क्या है

क्यों उपयोग ObservableObjectसबसे अच्छा समाधान नहीं है

क्या है EnvironmentObject?

के ViewRouterरूप में क्रियान्वयनEnvironmentObject

संक्रमण एनिमेशन जोड़ना

निष्कर्ष

More articles:

क्यों उपयोग `ObservableObject`सबसे अच्छा समाधान नहीं है

क्या है `EnvironmentObject`?

के `ViewRouter`रूप में क्रियान्वयन`EnvironmentObject`