NavigationLink — nima, SwiftUI-da o'tish tugmasi

SwiftUI-da NavigationLink nima?

NavigationLink bosilganda navigatsiya o'tishini boshlaydigan View-dir. NavigationStack ichida NavigationLink-ni bosish maqsadli ekranni stekga joylashtiradi va tizimning “Orqaga” tugmasini ko'rsatadi. NavigationLink iOS 13 dan mavjud va SwiftUI-da foydalanuvchi navigatsiyasining asosiy usulidir.

NavigationLink UIButton dan meros olmaydi — bu kontekstga avtomatik moslashadigan SwiftUI View-dir. List ichida NavigationLink ochish ko'rsatkichi (disclosure indicator) bilan ko'rsatiladi. Ro'yxatdan tashqarida NavigationLink oddiy tugma kabi harakat qiladi, lekin navigatsiya xatti-harakati bilan.

SwiftUI Lab (2024)-ga ko'ra, NavigationLink SwiftUI ilovalarida eng ko'p ishlatiladigan View-lardan biri bo'lib, faqat Text, Image va VStack dan keyin turadi. Inicializatsiya shakllari orasidagi farqlarni tushunish ishlash va bashorat qilinadigan navigatsiya uchun juda muhimdir.

NavigationLink qanday ishlaydi (ichki mexanizm)

Bosilganda NavigationLink eng yaqin NavigationStack yoki NavigationView bilan bog'liq navigatsiya stekiga qiymat (yoki destination) qo'shadi. SwiftUI View ierarxiyasi orqali navigatsiya yo'lini uzatish uchun EnvironmentValue dan foydalanadi. NavigationLink bu yo'lni Environment dan o'qiydi va bosilganda uni o'zgartiradi.

NavigationLink inicializatsiya shakllari

NavigationLink ikkita asosiy shaklga ega: destination (to'g'ridan-to'g'ri maqsadli View ko'rsatish) va value (NavigationDestination uchun qiymat). Shakl tanlash iOS versiyasi va navigatsiya arxitekturasiga bog'liq.

Destination shakli (iOS 13+): NavigationLink(destination: DetailView(), label: { Text(“Open”) }). Bu shakl NavigationLink render qilinganda darhol DetailView yaratadi, hatto foydalanuvchi linkni bosmagan bo'lsa ham. Bu View-ning muddatidan oldin inicializatsiyasiga va agar maqsadli View inicializatorda og'ir operatsiyalarni bajarsa potensial ishlash muammolariga olib keladi.

Value shakli (iOS 16+): NavigationLink(value: “detail_42”, label: { Text(“Open”) }). Maqsadli View faqat link bosilganda, SwiftUI tegishli .navigationDestination ni topganda yaratiladi. Bu muddatidan oldin inicializatsiyani oldini oladi va navigatsiyani yanada bashorat qilinadigan qiladi.

NavigationStack bilan NavigationLink: to'g'ri foydalanish

NavigationStack bilan NavigationLink iOS 16+ da value shakliga o'tishni talab qiladi. Navigatsiya uchun ma'lumot turini (String, Int, enum Route) belgilaysiz va .navigationDestination orqali destination ni ro'yxatdan o'tkazasiz. NavigationLink stekga faqat qiymatni joylashtiradi, SwiftUI esa bosilganda maqsadli View-ni yaratadi.

struct CatalogView: View {
    let categories: [String]

    var body: some View {
        List(categories, id: \.self) { category in
            NavigationLink(value: category) {
                Text(category)
            }
        }
        .navigationDestination(for: String.self) { category in
            CategoryView(name: category)
        }
    }
}

// Dasturiy navigatsiya:
struct DeepLinkView: View {
    @State private var path: [AppRoute] = []

    var body: some View {
        NavigationStack(path: $path) {
            HomeView()
                .navigationDestination(for: AppRoute.self) { route in
                    switch route {
                    case .detail(let id): DetailView(id: id)
                    case .settings: SettingsView()
                    }
                }
                .toolbar {
                    Button("Sozlamalarni och") {
                        path.append(AppRoute.settings)
                    }
                }
        }
    }
}

Dasturiy navigatsiya: path ga qiymat qo'shish (path.append orqali) xuddi shu qiymat bilan NavigationLink-ni bosishga teng. Bu ViewModel, Coordinator yoki push bildirishnomalariga javoban navigatsiyani amalga oshirish imkonini beradi.

IsActive shakli (NavigationLink(isActive:destination:label:)) muvofiqlik uchun mavjud, ammo iOS 16+ da tavsiya etilmaydi. Yo'l massivi yoki NavigationPath ga Binding bilan value shaklidan foydalaning.

List-da NavigationLink: xususiyatlar

List-da NavigationLink avtomatik ravishda qatorning o'ng qismida ochish strelkasini (chevron) ko'rsatadi, foydalanuvchiga bosish boshqa ekranga o'tishga olib kelishini bildiradi. List strelka ko'rsatilishini avtomatik boshqaradi — ro'yxatdan tashqaridagi oddiy NavigationLink dan farqli o'laroq, unda strelka yo'q.

iOS 16 dan boshlab, List NavigationLink bilan List(data:rowContent:) ichida avtomatik ravishda value shaklidan foydalanadi. List ichida ForEach ishlatganda ham ochish strelkasi avtomatik qo'shiladi. Bu xatti-harakatni modifierlar orqali o'chirib bo'lmaydi — faqat NavigationLink ni Button bilan almashtirish strelkani olib tashlashi mumkin.

List-da destination shakli muammosi: agar List ichida NavigationLink(destination:label:) ishlatsangiz, barcha maqsadli View-lar foydalanuvchi linkni bosgan-bosmagani dan qat'iy nazar, ro'yxat yuklanganda darhol yaratiladi. Ko'p sonli qatorlarga ega ro'yxatlar uchun bu boshlang'ich yuklashni sezilarli darajada sekinlashtirishi va xotira iste'molini oshirishi mumkin. NavigationStack bilan value shakli bu muammoni hal qiladi.

WWDC 2022 (Session 10054)-ga ko'ra, Apple yangi loyihalar uchun NavigationStack va NavigationLink ning value shaklidan foydalanishni tavsiya qiladi. Bu, ayniqsa, qatorlar soni ko'p bo'lishi mumkin bo'lgan dinamik ma'lumotli List-lar uchun muhimdir.

NavigationLink foydalanish namunalari

Namuna 1: moslashtirilgan ko'rinishdagi NavigationLink. NavigationLink label sifatida istalgan View-ni qabul qiladi, link uchun istalgan dizayn yaratish imkonini beradi. List ichida bu ayniqsa qulay — NavigationLink ishlatganda avtomatik ravishda ochish strelkasini olasiz.

NavigationLink(value: ProductRoute.detail(product)) {
    HStack {
        AsyncImage(url: product.imageURL)
            .frame(width: 60, height: 60)
        VStack(alignment: .leading) {
            Text(product.name).font(.headline)
            Text(product.price) .foregroundColor(.secondary)
        }
    }
    .padding(8)
}

Namuna 2: strelkasiz NavigationLink (moslashtirilgan tugma). Ochish strelkasi kerak bo'lmasa, dasturiy navigatsiya uchun Button dan foydalaning: path.append(value). Bu NavigationLink tabiiy ko'rinmaydigan moslashtirilgan interfeys elementlari uchun foydalidir.

Namuna 3: shartli navigatsiya. NavigationLink ni bo'sh destination ishlatib yoki ma'lum qiymatlar uchun .navigationDestination qo'shmay bloklashingiz mumkin. Path orqali dasturiy navigatsiya qiymat qo'shishdan oldin shartlarni tekshirish imkonini beradi.

Hacking with Swift (2024)-ga ko'ra, NavigationLink bilan bog'liq muammolarning aksariyati eski loyihalarda destination shaklidan foydalanish bilan bog'liq. NavigationStack ga migratsiya paytida barcha NavigationLink(destination:label:) larni NavigationLink(value:label:) bilan almashtiring va ildiz darajasida .navigationDestination qo'shing.