Published on

NavigationLink

Authors

Sizda NavigationStack bor. Endi foydalanuvchi keyingi ekranga o'tishi uchun biror narsa kerak. Aynan mana shu NavigationLink. Uni veb-sahifadagi havola sifatida tasavvur qiling β€” tepsangiz biror joyga borasiz. Farqi shuki, URL yuklaish o'rniga yangi SwiftUI view navigatsiya to'plamiga push qilinadi.

NavigationLink ikkita qismdan iborat: label (foydalanuvchi ko'radigan va tepadigan narsa) va destination (tepilganda chiquvchi view). Label istalgan narsa bo'lishi mumkin β€” matn, rasm yoki butun maxsus qator. Destination β€” ko'rsatmoqchi bo'lgan istalgan SwiftUI view.

Yangi boshlovchilar eng ko'p ishlatiladigan pattern: ro'yxatdagi har bir qator NavigationLink bo'lib, detail ekranga push qiladi:

Swift
ContentView.swift
import SwiftUI struct ContentView: View { var body: some View { NavigationStack { // List qatorlar beradi β€” har bir qator NavigationLink bo'lishi mumkin List { // NavigationLink: label ko'rinadigan, destination β€” boruvchi joy NavigationLink("Detail-ga o'tish") { Text("Detail ekrani") .navigationTitle("Detail") .navigationBarTitleDisplayMode(.inline) } NavigationLink("Sozlamalarga o'tish") { Text("Sozlamalar ekrani") .navigationTitle("Sozlamalar") .navigationBarTitleDisplayMode(.inline) } } .navigationTitle("Bosh sahifa") } } }

Destinatsiyaga data o'tkazish

NavigationStack {
    List(mevalar, id: \.self) { meva in
        // Mevani label sifatida, FruitDetailView-ga o'tkazib
        NavigationLink(meva) {
            FruitDetailView(meva: meva)
        }
    }
    .navigationTitle("Mevalar")
}

Ro'yxatning har bir elementi navigatsiya havola bo'lib, o'z datasi bilan detail view-ga boradi. List ichidagi NavigationLink avtomatik o'q (chevron β€Ί) ikonkasini qo'shadi.

Maxsus label

NavigationLink {
    UserProfileView(foydalanuvchi: foydalanuvchi)
} label: {
    // Odatiy matn label o'rniga maxsus HStack
    HStack {
        Image(systemName: "person.circle.fill")
            .font(.title2)
        VStack(alignment: .leading) {
            Text(foydalanuvchi.ismi).font(.headline)
            Text(foydalanuvchi.email).font(.caption).foregroundStyle(.secondary)
        }
    }
}

Oddiy matn label-dan ko'ra maxsus dizaynli qator kerak bo'lganda label: closure-dan foydalaning.

NavigationStack {
    List(mevalar, id: \.self) { meva in
        NavigationLink(meva, value: meva)
    }
    .navigationTitle("Mevalar")
    // Destination bir joyda ta'minlanadi β€” har bir link-da emas
    .navigationDestination(for: String.self) { meva in
        MevaDetailView(meva: meva)
    }
}

Bu iOS 16+ da tavsiya etilgan pattern. Destination-ni NavigationStack-da bir marta aniqlab qo'yasiz, har bir link-da emas. Shuningdek, programmatik navigatsiyani ham yoqadi (4.3-darsda o'rganamiz). Ko'p link bir xil turdagi view-ga borganda ishlating.

NavigationLink turiQachon ishlatiladi
NavigationLink("Label") { DestView() }Oddiy navigatsiya, oz sonli link, destination-ga data kerak emas
NavigationLink(meva) { MevaDetailView(meva: meva) }Qiymatni oldinga o'tkazish, har bir link o'z destination-iga ega
NavigationLink("Label") { } label: { CustomView }Oddiy matn o'rniga maxsus dizaynli qator kerak bo'lganda
NavigationLink(value: element) + .navigationDestinationiOS 16+, ko'p link bir xil turdagi destination-ga, yoki programmatik navigatsiya

Muhim: NavigationLink faqat NavigationStack ichida ishlaydi. Tashqarisiga qo'ysangiz foydalanuvchi bosganida hech narsa bo'lmaydi β€” xato ham yo'q, faqat jimlik. Bu yangi boshlovchilarning eng keng tarqalgan chalkashliklaridan biri.

Tezkor ma'lumotnoma

SintaksisVazifasi
NavigationLink("Matn") { View() }Matnli link β€” tepilganda View-ni push qiladi
NavigationLink(qiymat) { DetailView(q: qiymat) }Data o'tkazuvchi link
NavigationLink { dest } label: { custom }Maxsus label bilan link
NavigationLink(value: element).navigationDestination bilan juft ishlatiladigan link
.navigationDestination(for: Tur.self) { v in }Tur bo'yicha destination-ni bir joyda ta'minlaydi

Topshiriq: ro'yxat va detail ekrani

5 ta element ro'yxatini yarating (shaharlar, filmlar, hayvonlar β€” ixtiyoriy). Har bir qator NavigationLink bo'lib, elementning nomini katta sarlavhada va biror placeholder matnni ko'rsatuvchi detail view-ga o'tsin. Simulyatorda ishga tushirib, ro'yxat bo'ylab tering. Biror qatorni ikonka bilan maxsus label yordamida sozlang.

Buy mea coffee