NavigationView: मूल बातें, SwiftUI ऐप्स में नेविगेशन स्टैक

NavigationView क्या है?

NavigationView एक SwiftUI कंटेनर है जो स्क्रीन के पदानुक्रम को लपेटता है और एक नेविगेशन इंटरफ़ेस प्रदान करता है। NavigationView के अंदर NavigationLink काम करता है — एक तत्व जिसे दबाने पर वर्तमान स्क्रीन को एक नई स्क्रीन से बदल दिया जाता है। NavigationView स्वचालित रूप से शीर्षक और «पीछे» बटन के साथ एक नेविगेशन बार जोड़ता है।

NavigationView SwiftUI के साथ iOS 13 में दिखाई दिया। अवधारणात्मक रूप से, यह UIKit से UINavigationController को बदलता है, लेकिन घोषणात्मक रूप से कार्यान्वित किया गया है। मैन्युअल push/pop के बजाय, डेवलपर NavigationLink के माध्यम से स्क्रीन के बीच संबंध का वर्णन करता है। सिस्टम स्वचालित रूप से स्टैक का प्रबंधन करता है।

NavigationView मॉडिफ़ायर .navigationTitle, .navigationBarTitleDisplayMode, .toolbar और .searchable का समर्थन करता है। iOS 16+ के लिए, Apple ने NavigationStack पेश किया, जो NavigationView API को संरक्षित करता है लेकिन NavigationPath के माध्यम से प्रोग्रामेटिक स्टैक प्रबंधन जोड़ता है। iOS 15 और उससे नीचे का समर्थन करने वाली परियोजनाओं के लिए, NavigationView एकमात्र विकल्प बना हुआ है।

NavigationLink और स्क्रीन के बीच संक्रमण

NavigationLink एक SwiftUI तत्व है जो NavigationView या NavigationStack के अंदर लक्ष्य स्क्रीन पर संक्रमण बनाता है। NavigationLink दबाने पर, सिस्टम लक्ष्य स्क्रीन को नेविगेशन स्टैक में जोड़ता है। संक्रमण एनिमेशन iOS पर दाईं ओर से मानक push है, जो प्लेटफ़ॉर्म के अनुकूल होता है।

struct ContentView: View {
    var body: some View {
        NavigationView {
            List(items) { item in
                NavigationLink(destination: DetailView(item: item)) {
                    Text(item.title)
                }
            }
            .navigationTitle("सूची")
        }
    }
}

struct DetailView: View {
    let item: Item

    var body: some View {
        VStack {
            Text(item.description)
                .navigationTitle(item.title)
                .navigationBarTitleDisplayMode(.inline)
        }
    }
}

NavigationLink दो पैरामीटर लेता है: destination — लक्ष्य View, और label — वह तत्व जिसे उपयोगकर्ता दबाता है। सूचियों के लिए, value और NavigationLink(value:) के साथ सिंटैक्स सुविधाजनक है — यह स्वचालित रूप से सेल को अचयनित करता है और NavigationPath के साथ काम करता है।

NavigationStack बनाम NavigationView: API तुलना

iOS 16 के साथ, Apple ने NavigationView के प्रतिस्थापन के रूप में NavigationStack पेश किया। NavigationStack घोषणात्मक सिंटैक्स को संरक्षित करता है लेकिन एक अत्यंत महत्वपूर्ण सुविधा जोड़ता है — NavigationPath प्रकार या Hashable की सरणी के path गुण के माध्यम से प्रोग्रामेटिक स्टैक प्रबंधन।

न्यूनतम संस्करण iOS 16+ वाली परियोजनाओं के लिए, NavigationStack का उपयोग करें। iOS 14-15 समर्थन के लिए — NavigationView। NavigationStack के पुराने संस्करणों के लिए कोई सीधा एनालॉग नहीं है, इसलिए अपग्रेड के लिए संगतता जाँच की आवश्यकता होती है।

Toolbar और navigationTitle कॉन्फ़िगरेशन

.toolbar और .navigationTitle मॉडिफ़ायर नेविगेशन बार की सामग्री को नियंत्रित करते हैं। .navigationTitle स्क्रीन का शीर्षक सेट करता है, .navigationBarTitleDisplayMode शैली चुनता है: .large (बड़ा, डिफ़ॉल्ट) या .inline (कॉम्पैक्ट, सेटिंग्स की तरह)। .toolbar बटन, खोज और खंडित नियंत्रण जोड़ता है।

struct SettingsView: View {
    var body: some View {
        NavigationStack {
            Form {
                Section("प्रोफ़ाइल") {
                    Text("उपयोगकर्ता नाम")
                    Toggle("सूचनाएँ", isOn: $notifications)
                }
            }
            .navigationTitle("सेटिंग्स")
            .navigationBarTitleDisplayMode(.large)
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("सहेजें") { save() }
                }
                ToolbarItem(placement: .navigationBarLeading) {
                    EditButton()
                }
            }
        }
    }
}

.searchable एक और मॉडिफ़ायर है जो नेविगेशन बार में खोज बार को एकीकृत करता है। NavigationView और NavigationStack दोनों के साथ काम करता है। स्क्रॉल करते समय खोज स्वचालित रूप से छिप जाती है और नीचे स्वाइप करने पर दिखाई देती है। Binding String के माध्यम से सूची फ़िल्टरिंग का समर्थन करता है।

NavigationPath के साथ प्रोग्रामेटिक नेविगेशन

NavigationPath एक iOS 16+ प्रकार है जो नेविगेशन स्टैक को Hashable मानों के संग्रह के रूप में दर्शाता है। डेवलपर प्रोग्रामेटिक संक्रमण के लिए path में तत्व जोड़ता है, वापस लौटने के लिए हटाता है। NavigationPath डीप लिंक, push सूचनाएँ और स्थिति बहाली का समर्थन करता है।

struct AppNavigation: View {
    @State private var path = NavigationPath()

    var body: some View {
        NavigationStack(path: $path) {
            List(categories) { category in
                NavigationLink("श्रेणी \(category.name)",
                               value: category)
            }
            .navigationTitle("श्रेणियाँ")
            .navigationDestination(for: Category.self) { category in
                ProductListView(category: category)
            }
            .navigationDestination(for: Product.self) { product in
                ProductDetailView(product: product)
            }
        }

        // डीप लिंक द्वारा प्रोग्रामेटिक संक्रमण
        .onOpenURL { url in
            guard let productId = DeepLinkParser.parse(url) else { return }
            path.append(Product(id: productId))
        }
    }
}

.navigationDestination(for:) एक डेटा प्रकार पंजीकृत करता है जिसके लिए स्क्रीन दिखानी है। जब इस प्रकार का मान path में जोड़ा जाता है, तो सिस्टम स्वचालित रूप से लक्ष्य View बनाता है। यह दृष्टिकोण स्पष्ट NavigationLink(destination:) को बदलता है और नेविगेशन को सख्ती से टाइप किया हुआ बनाता है।

iPad, watchOS और tvOS पर NavigationView

NavigationView और NavigationStack सभी Apple प्लेटफ़ॉर्म पर काम करते हैं: iOS, iPadOS, watchOS, tvOS और macOS। व्यवहार स्क्रीन के अनुकूल होता है। iPad पर, NavigationStack NavigationSplitView का समर्थन करता है, जो UIKit से UISplitViewController को बदलता है और चौड़ी स्क्रीन पर दो कॉलम प्रदर्शित करता है।

NavigationSplitView (iOS 16+) स्क्रीन को साइडबार (सूची) और विवरण में विभाजित करता है। iPhone पर, साइडबार छिपा होता है, केवल NavigationLink के माध्यम से विवरण दिखाता है। iPad पर, साइडबार और विवरण विभाजन मोड में एक साथ प्रदर्शित होते हैं।

struct AdaptiveNavigation: View {
    @State private var selectedCategory: Category?

    var body: some View {
        NavigationSplitView {
            List(categories, selection: $selectedCategory) { category in
                Text(category.name)
            }
            .navigationTitle("श्रेणियाँ")
        } detail: {
            ProductListView(category: selectedCategory)
        }
    }
}

NavigationSplitView प्रत्येक डिवाइस के लिए स्वचालित रूप से इष्टतम प्रदर्शन मोड चुनता है। पोर्ट्रेट में iPhone पर — स्टैक, लैंडस्केप में iPad और iPhone पर — विभाजन। डेवलपर को विभिन्न आकार वर्गों के लिए अलग कोड लिखने की आवश्यकता नहीं है।