NavigationView: الأساسيات، مكدس التنقل في تطبيقات SwiftUI

ما هو NavigationView؟

NavigationView هو حاوية SwiftUI تغلف تسلسلاً هرمياً من الشاشات وتوفر واجهة تنقل. داخل NavigationView يعمل NavigationLink — عنصر عند الضغط عليه يستبدل الشاشة الحالية بأخرى جديدة. يضيف NavigationView تلقائياً شريط تنقل مع عنوان وزر «رجوع».

ظهر NavigationView في iOS 13 مع SwiftUI. من الناحية المفاهيمية، يحل محل UINavigationController من UIKit لكنه مطبَّق بشكل تصريحي. بدلاً من الدفع/الإرجاع اليدوي، يصف المطور العلاقة بين الشاشات باستخدام NavigationLink. يدير النظام المكدس تلقائياً.

NavigationView يدعم المعدِّلات .navigationTitle و .navigationBarTitleDisplayMode و .toolbar و .searchable. بالنسبة لـ iOS 16+، قدمت Apple NavigationStack الذي يحافظ على API NavigationView لكنه يضيف إدارة برمجية للمكدس عبر NavigationPath. للمشاريع التي تدعم iOS 15 وما دونه، يبقى NavigationView الخيار الوحيد.

NavigationLink والانتقالات بين الشاشات

NavigationLink هو عنصر SwiftUI ينشئ انتقالاً إلى شاشة مستهدفة داخل NavigationView أو NavigationStack. عند الضغط على NavigationLink، يضيف النظام الشاشة المستهدفة إلى مكدس التنقل. حركة الانتقال هي الدفع القياسي من اليمين في 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 هو معدِّل آخر يدمج شريط بحث في شريط التنقل. يعمل مع كل من NavigationView و NavigationStack. يختفي البحث تلقائياً عند التمرير ويظهر عند السحب لأسفل. يدعم تصفية القوائم عبر Binding String.

التنقل البرمجي مع NavigationPath

NavigationPath هو نوع من iOS 16+ يمثل مكدس تنقل كمجموعة من قيم Hashable. يضيف المطور عناصر إلى path للانتقال البرمجي ويزيلها للعودة. يدعم NavigationPath الروابط العميقة وإشعارات الدفع واستعادة الحالة.

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:) الصريح ويجعل التنقل مقيداً بنمط صارم.

NavigationView على iPad و watchOS و tvOS

NavigationView و NavigationStack يعملان على جميع منصات Apple: iOS و iPadOS و watchOS و tvOS و macOS. يتكيف السلوك مع الشاشة. على iPad، يدعم NavigationStack NavigationSplitView الذي يحل محل UISplitViewController من UIKit ويعرض عمودين على الشاشة العريضة.

يقسم 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 في الوضع الأفقي — تقسيم. لا يحتاج المطور إلى كتابة كود منفصل لفئات الحجم المختلفة.