NavigationView: əsasları, SwiftUI tətbiqlərində naviqasiya yığını

NavigationView nədir?

NavigationView — SwiftUI konteyneri, ekranlar iyerarxiyasını əhatə edir və naviqasiya interfeysi təqdim edir. NavigationView daxilində NavigationLink işləyir — tıklandıqda cari ekranı yenisi ilə əvəz edən element. NavigationView avtomatik olaraq başlıq və «Geri» düyməsi ilə navigation bar əlavə edir.

NavigationView iOS 13-də SwiftUI ilə birlikdə ortaya çıxdı. Konseptual olaraq UIKit-dən UINavigationController-i əvəz edir, lakin deklarativ şəkildə həyata keçirilir. Əl ilə push/pop əvəzinə, tərtibatçı NavigationLink vasitəsilə ekranlar arasındakı əlaqəni təsvir edir. Sistem avtomatik olaraq yığını idarə edir.

NavigationView .navigationTitle, .navigationBarTitleDisplayMode, .toolbar və .searchable modifierlərini dəstəkləyir. iOS 16+ üçün Apple NavigationStack-i təqdim etdi, o NavigationView API-ni qoruyur, lakin NavigationPath vasitəsilə proqram yığın idarəetməsi əlavə edir. iOS 15 və daha köhnə versiyaları dəstəkləyən layihələr üçün NavigationView yeganə seçim olaraq qalır.

NavigationLink və ekranlar arası keçidlər

NavigationLink — NavigationView və ya NavigationStack daxilində hədəf ekrana keçid yaradan SwiftUI elementidir. NavigationLink-ə tıklandıqda sistem hədəf ekranı naviqasiya yığınına əlavə edir. Keçid animasiyası — iOS üçün standart sağdan push, platformaya uyğunlaşır.

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

struct DetailView: View {
    let item: Item

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

NavigationLink iki parametr qəbul edir: destination — hədəf View, və label — istifadəçinin tıkladığı element. Siyahılar üçün value və NavigationLink(value:) ilə sintaksis əlverişlidir, o avtomatik olaraq xananı seçimi ləğv edir və NavigationPath ilə işləyir.

NavigationStack vs NavigationView: API müqayisəsi

iOS 16-dan etibarən Apple NavigationStack-i NavigationView-in əvəzedicisi kimi təqdim etdi. NavigationStack deklarativ sintaksisi qoruyur, lakin kritik əhəmiyyətli bir imkan əlavə edir — NavigationPath tipli path xassəsi və ya Hashable massivi vasitəsilə proqram yığın idarəetməsi.

Minimal iOS 16+ versiyası olan layihələr üçün NavigationStack-dən istifadə edin. iOS 14-15 dəstəyi üçün — NavigationView. NavigationStack-in köhnə versiyalar üçün birbaşa analoqu yoxdur, ona görə də yeniləmə uyğunluq yoxlanışı tələb edir.

Toolbar və navigationTitle qurulumu

.toolbar və .navigationTitle modifierləri naviqasiya panelinin məzmununu idarə edir. .navigationTitle ekran başlığını təyin edir, .navigationBarTitleDisplayMode stil seçir: .large (böyük, standart) və ya .inline (kompakt, Parametrlərdəki kimi). .toolbar düymələr, axtarış və seqmentli nəzarət əlavə edir.

struct SettingsView: View {
    var body: some View {
        NavigationStack {
            Form {
                Section("Profil") {
                    Text("İstifadəçi adı")
                    Toggle("Bildirişlər", isOn: $notifications)
                }
            }
            .navigationTitle("Parametrlər")
            .navigationBarTitleDisplayMode(.large)
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("Yadda saxla") { save() }
                }
                ToolbarItem(placement: .navigationBarLeading) {
                    EditButton()
                }
            }
        }
    }
}

.searchable — navigation bar-a axtarış sətri inteqrasiya edən digər modifier. Həm NavigationView, həm də NavigationStack ilə işləyir. Axtarış sürüşdürmə zamanı avtomatik gizlənir və aşağı sürüşdürmə ilə göstərilir. Binding String vasitəsilə siyahı filtrasiyasını dəstəkləyir.

NavigationPath ilə proqram naviqasiyası

NavigationPath — iOS 16+ tipi, naviqasiya yığınını Hashable dəyərlər kolleksiyası kimi təmsil edir. Tərtibatçı proqram keçidi üçün path-ə elementlər əlavə edir, qayıtmaq üçün silir. NavigationPath dərin linkləri, push bildirişlərini və vəziyyətin bərpasını dəstəkləyir.

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

    var body: some View {
        NavigationStack(path: $path) {
            List(categories) { category in
                NavigationLink("Kateqoriya \(category.name)",
                               value: category)
            }
            .navigationTitle("Kateqoriyalar")
            .navigationDestination(for: Category.self) { category in
                ProductListView(category: category)
            }
            .navigationDestination(for: Product.self) { product in
                ProductDetailView(product: product)
            }
        }

        // Deep link ilə proqram keçidi
        .onOpenURL { url in
            guard let productId = DeepLinkParser.parse(url) else { return }
            path.append(Product(id: productId))
        }
    }
}

.navigationDestination(for:) ekranın göstərilməli olduğu məlumat tipini qeydə alır. Path-ə bu tipin dəyəri əlavə edildikdə, sistem avtomatik olaraq hədəf View yaradır. Bu yanaşma açıq NavigationLink(destination:) əvəz edir və naviqasiyanı ciddi şəkildə tipizasiya edir.

iPad, watchOS və tvOS-da NavigationView

NavigationView və NavigationStack bütün Apple platformalarında işləyir: iOS, iPadOS, watchOS, tvOS və macOS. Davranış ekrana uyğunlaşır. iPad-də NavigationStack UIKit-dən UISplitViewController-i əvəz edən NavigationSplitView-i dəstəkləyir və geniş ekranda iki sütun göstərir.

NavigationSplitView (iOS 16+) ekranı sidebar (siyahı) və detail (təfərrüatlar) bölmələrinə ayırır. iPhone-da sidebar gizlənir, yalnız NavigationLink vasitəsilə detail göstərilir. iPad-də sidebar və detail eyni vaxtda split rejimində göstərilir.

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

    var body: some View {
        NavigationSplitView {
            List(categories, selection: $selectedCategory) { category in
                Text(category.name)
            }
            .navigationTitle("Kateqoriyalar")
        } detail: {
            ProductListView(category: selectedCategory)
        }
    }
}

NavigationSplitView hər bir cihaz üçün optimal göstərim rejimini avtomatik seçir. iPhone-da portret rejimdə — yığın, iPad və iPhone-da landscape rejimdə — split. Tərtibatçı müxtəlif size classlar üçün ayrıca kod yazmalı deyil.