NavigationView: مبانی، پشته ناوبری در برنامه‌های SwiftUI

NavigationView چیست؟

NavigationView — یک کانتینر SwiftUI است که سلسله‌مراتب صفحه‌ها را در بر می‌گیرد و یک رابط ناوبری ارائه می‌دهد. در داخل NavigationView، NavigationLink کار می‌کند — عنصری که با کلیک روی آن، صفحه فعلی با صفحه جدید جایگزین می‌شود. NavigationView به طور خودکار navigation bar با عنوان و دکمه «بازگشت» اضافه می‌کند.

NavigationView همراه با SwiftUI در iOS 13 ظاهر شد. از نظر مفهومی، جایگزین UINavigationController از UIKit می‌شود، اما به صورت اعلانی پیاده‌سازی شده است. به جای push/pop دستی، توسعه‌دهنده ارتباط بین صفحه‌ها را از طریق NavigationLink توصیف می‌کند. سیستم به طور خودکار پشته را مدیریت می‌کند.

NavigationView از اصلاح‌کننده‌های .navigationTitle، .navigationBarTitleDisplayMode، .toolbar و .searchable پشتیبانی می‌کند. برای iOS 16+، Apple NavigationStack را معرفی کرد که API NavigationView را حفظ می‌کند، اما مدیریت برنامه‌ریزی شده پشته را از طریق NavigationPath اضافه می‌کند. برای پروژه‌هایی که از iOS 15 و پایین‌تر پشتیبانی می‌کنند، NavigationView تنها گزینه باقی می‌ماند.

NavigationLink و انتقال بین صفحه‌ها

NavigationLink — عنصری در SwiftUI که یک انتقال به صفحه مقصد در داخل NavigationView یا NavigationStack ایجاد می‌کند. با کلیک روی NavigationLink، سیستم صفحه مقصد را به پشته ناوبری اضافه می‌کند. انیمیشن انتقال — push استاندارد از راست برای iOS، متناسب با پلتفرم تنظیم می‌شود.

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 NavigationStack را به عنوان جایگزین NavigationView معرفی کرد. NavigationStack نحو اعلانی را حفظ می‌کند، اما یک قابلیت حیاتی اضافه می‌کند — مدیریت برنامه‌ریزی شده پشته از طریق ویژگی path از نوع NavigationPath یا آرایه‌ای از Hashable.

برای پروژه‌هایی با حداقل نسخه 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 — اصلاح‌کننده دیگری که نوار جستجو را در navigation bar ادغام می‌کند. هم با 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)
            }
        }

        // انتقال برنامه‌ریزی شده از طریق deep link
        .onOpenURL { url in
            guard let productId = DeepLinkParser.parse(url) else { return }
            path.append(Product(id: productId))
        }
    }
}

.navigationDestination(for:) نوع داده‌ای را که باید صفحه برای آن نمایش داده شود ثبت می‌کند. هنگامی که مقداری از این نوع به path اضافه می‌شود، سیستم به طور خودکار View مقصد را ایجاد می‌کند. این رویکرد جایگزین NavigationLink(destination:) صریح می‌شود و ناوبری را به شدت تایپ‌سازی می‌کند.

NavigationView در iPad، watchOS و tvOS

NavigationView و NavigationStack در تمام پلتفرم‌های Apple کار می‌کنند: iOS، iPadOS، watchOS، tvOS و macOS. رفتار متناسب با صفحه تنظیم می‌شود. در iPad، NavigationStack از NavigationSplitView پشتیبانی می‌کند که جایگزین UISplitViewController از UIKit می‌شود و دو ستون را در صفحه عریض نمایش می‌دهد.

NavigationSplitView (iOS 16+) صفحه را به sidebar (لیست) و detail (جزئیات) تقسیم می‌کند. در iPhone، sidebar پنهان می‌شود و فقط detail از طریق NavigationLink نمایش داده می‌شود. در iPad، sidebar و detail به طور همزمان در حالت split نمایش داده می‌شوند.

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 در حالت افقی — split. توسعه‌دهنده نیازی به نوشتن کد جداگانه برای size classهای مختلف ندارد.