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 একমাত্র বিকল্প remained.

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-এ — স্প্লিট। ডেভেলপারকে বিভিন্ন আকারের ক্লাসের জন্য আলাদা কোড লিখতে হবে না।