NavigationLink — यह क्या है, SwiftUI में संक्रमण बटन

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

NavigationLink एक View है जो दबाने पर नेविगेशन संक्रमण शुरू करता है। NavigationStack के अंदर, NavigationLink दबाने पर लक्ष्य स्क्रीन को स्टैक पर रखता है और सिस्टम का पीछे जाएँ बटन प्रदर्शित करता है। NavigationLink iOS 13 से मौजूद है और SwiftUI में उपयोगकर्ता नेविगेशन का प्राथमिक तरीका है।

NavigationLink UIButton से विरासत में नहीं लेता — यह एक SwiftUI View है जो स्वचालित रूप से संदर्भ के अनुकूल होता है। List के अंदर, NavigationLink प्रकटीकरण संकेतक के साथ प्रदर्शित होता है। सूची के बाहर, NavigationLink एक सामान्य बटन की तरह व्यवहार करता है लेकिन नेविगेशन व्यवहार के साथ।

SwiftUI Lab (2024) के अनुसार, NavigationLink SwiftUI अनुप्रयोगों में सबसे अधिक उपयोग किए जाने वाले Views में से एक है, जो केवल Text, Image और VStack के बाद आता है। आरंभीकरण रूपों के बीच अंतर को समझना प्रदर्शन और पूर्वानुमानित नेविगेशन व्यवहार के लिए महत्वपूर्ण है।

NavigationLink अंदरूनी रूप से कैसे काम करता है

दबाने पर, NavigationLink निकटतम NavigationStack या NavigationView से जुड़े नेविगेशन स्टैक में एक मान (या destination) जोड़ता है। SwiftUI View पदानुक्रम के माध्यम से नेविगेशन पथ पास करने के लिए EnvironmentValue का उपयोग करता है। NavigationLink इस पथ को Environment से पढ़ता है और दबाने पर इसे संशोधित करता है।

NavigationLink के आरंभीकरण रूप

NavigationLink के दो मुख्य रूप हैं: destination के साथ (सीधे लक्ष्य View निर्दिष्ट करना) और value के साथ (NavigationDestination के लिए मान)। रूप का चुनाव iOS संस्करण और नेविगेशन आर्किटेक्चर पर निर्भर करता है।

Destination रूप (iOS 13+): NavigationLink(destination: DetailView(), label: { Text("Open") }). यह रूप NavigationLink प्रस्तुत करते समय तुरंत DetailView बनाता है, भले ही उपयोगकर्ता ने लिंक पर क्लिक न किया हो। इससे View की समयपूर्व आरंभीकरण होती है और यदि लक्ष्य View अपने आरंभक में भारी संचालन करता है तो संभावित प्रदर्शन समस्याएँ होती हैं।

Value रूप (iOS 16+): NavigationLink(value: "detail_42", label: { Text("Open") }). लक्ष्य View केवल तब बनाया जाता है जब लिंक दबाया जाता है, जब SwiftUI संबंधित .navigationDestination ढूंढता है। यह समयपूर्व आरंभीकरण को रोकता है और नेविगेशन को अधिक पूर्वानुमानित बनाता है।

NavigationStack के साथ NavigationLink: सही उपयोग

NavigationStack के साथ NavigationLink iOS 16+ में value रूप पर स्विच करने की आवश्यकता है। आप नेविगेशन के लिए एक डेटा प्रकार (String, Int, enum Route) परिभाषित करते हैं और .navigationDestination के माध्यम से गंतव्य पंजीकृत करते हैं। NavigationLink केवल स्टैक पर मान रखता है, और SwiftUI दबाने पर लक्ष्य View बनाता है।

struct CatalogView: View {
    let categories: [String]

    var body: some View {
        List(categories, id: \.self) { category in
            NavigationLink(value: category) {
                Text(category)
            }
        }
        .navigationDestination(for: String.self) { category in
            CategoryView(name: category)
        }
    }
}

// Programmatic navigation:
struct DeepLinkView: View {
    @State private var path: [AppRoute] = []

    var body: some View {
        NavigationStack(path: $path) {
            HomeView()
                .navigationDestination(for: AppRoute.self) { route in
                    switch route {
                    case .detail(let id): DetailView(id: id)
                    case .settings: SettingsView()
                    }
                }
                .toolbar {
                    Button("Open Settings") {
                        path.append(AppRoute.settings)
                    }
                }
        }
    }
}

प्रोग्रामेटिक नेविगेशन: पथ में एक मान जोड़ना (path.append के माध्यम से) समान मान वाले NavigationLink दबाने के बराबर है। यह ViewModel, Coordinator या पुश सूचनाओं के जवाब से नेविगेशन लागू करने की अनुमति देता है।

IsActive रूप (NavigationLink(isActive:destination:label:)) संगतता के लिए उपलब्ध है लेकिन iOS 16+ में अनुशंसित नहीं है। पथ सरणी या NavigationPath के लिए Binding के साथ value रूप का उपयोग करें।

List में NavigationLink: विशेषताएं

List में NavigationLink स्वचालित रूप से पंक्ति के दाईं ओर एक प्रकटीकरण संकेतक (chevron) प्रदर्शित करता है, जो उपयोगकर्ता को संकेत देता है कि दबाने से दूसरी स्क्रीन पर जाया जाएगा। List तीर प्रदर्शन को स्वचालित रूप से प्रबंधित करता है — एक सामान्य NavigationLink के विपरीत जो सूची के बाहर होता है, जहाँ कोई तीर नहीं होता।

iOS 16 के साथ, NavigationLink वाली List स्वचालित रूप से List(data:rowContent:) के अंदर value रूप का उपयोग करती है। List के अंदर ForEach का उपयोग करते समय, प्रकटीकरण संकेतक भी स्वचालित रूप से जोड़ा जाता है। इस व्यवहार को संशोधक के माध्यम से अक्षम नहीं किया जा सकता — केवल NavigationLink को Button से बदलने से तीर हट सकता है।

List में destination रूप की समस्या: यदि आप List के अंदर NavigationLink(destination:label:) का उपयोग करते हैं, तो सभी गंतव्य Views सूची लोड करते समय तुरंत बनाए जाते हैं, भले ही उपयोगकर्ता ने लिंक पर क्लिक किया हो या नहीं। बड़ी संख्या में पंक्तियों वाली सूचियों के लिए, यह प्रारंभिक लोडिंग को काफी धीमा कर सकता है और मेमोरी खपत बढ़ा सकता है। NavigationStack के साथ value रूप इस समस्या को हल करता है।

WWDC 2022 (Session 10054) के अनुसार, Apple नए प्रोजेक्ट्स के लिए NavigationStack और NavigationLink के value रूप का उपयोग करने की अनुशंसा करता है। यह विशेष रूप से गतिशील डेटा वाली List के लिए महत्वपूर्ण है, जहाँ पंक्तियों की संख्या बड़ी हो सकती है।

NavigationLink उपयोग पैटर्न

पैटर्न 1: कस्टम NavigationLink स्वरूप। NavigationLink किसी भी View को label के रूप में स्वीकार करता है, जिससे लिंक के लिए कस्टम डिज़ाइन बनाने की अनुमति मिलती है। List के अंदर, यह विशेष रूप से सुविधाजनक है — आप NavigationLink का उपयोग करते समय स्वचालित प्रकटीकरण संकेतक प्राप्त करते हैं।

NavigationLink(value: ProductRoute.detail(product)) {
    HStack {
        AsyncImage(url: product.imageURL)
            .frame(width: 60, height: 60)
        VStack(alignment: .leading) {
            Text(product.name).font(.headline)
            Text(product.price) .foregroundColor(.secondary)
        }
    }
    .padding(8)
}

पैटर्न 2: बिना तीर के NavigationLink (कस्टम बटन)। यदि आपको प्रकटीकरण संकेतक की आवश्यकता नहीं है, तो प्रोग्रामेटिक नेविगेशन के लिए Button का उपयोग करें: path.append(value)। यह कस्टम इंटरफ़ेस तत्वों के लिए उपयोगी है जहाँ NavigationLink अप्राकृतिक दिखता है।

पैटर्न 3: सशर्त नेविगेशन। आप खाली destination का उपयोग करके या कुछ मानों के लिए .navigationDestination न जोड़कर NavigationLink को ब्लॉक कर सकते हैं। पथ के माध्यम से प्रोग्रामेटिक नेविगेशन मान जोड़ने से पहले शर्तों की जाँच करने की अनुमति देता है।

Hacking with Swift (2024) के अनुसार, NavigationLink की अधिकांश समस्याएँ पुराने प्रोजेक्ट्स में destination रूप के उपयोग से संबंधित हैं। NavigationStack पर माइग्रेट करते समय, सभी NavigationLink(destination:label:) को NavigationLink(value:label:) से बदलें और रूट स्तर पर .navigationDestination जोड़ें।