NavigationLink — ano ito, pindutan ng paglipat sa SwiftUI

Ano ang NavigationLink sa SwiftUI?

NavigationLink ay isang View na kapag pinindot ay nagpapasimula ng isang navigation transition. Sa loob ng NavigationStack, ang pagpindot sa NavigationLink ay naglalagay ng target na screen sa stack at nagpapakita ng system button na “Bumalik”. Ang NavigationLink ay umiiral mula noong iOS 13 at ito ang pangunahing paraan ng pag-navigate ng gumagamit sa SwiftUI.

Ang NavigationLink ay hindi nagmamana mula sa UIButton — ito ay isang SwiftUI View na awtomatikong umaangkop sa konteksto. Sa loob ng List, ang NavigationLink ay ipinapakita na may disclosure indicator. Sa labas ng listahan, ang NavigationLink ay kumikilos tulad ng isang ordinaryong pindutan, ngunit may gawi sa pag-navigate.

Ayon sa SwiftUI Lab (2024), ang NavigationLink ay isa sa mga pinaka-ginagamit na View sa mga SwiftUI application, na nalalampasan lamang ng Text, Image at VStack. Ang pag-unawa sa mga pagkakaiba sa pagitan ng mga form ng inisyalisasyon ay kritikal para sa pagganap at inaasahang gawi ng pag-navigate.

Paano gumagana ang NavigationLink sa ilalim ng hood

Kapag pinindot, ang NavigationLink ay nagdaragdag ng isang halaga (o destination) sa navigation stack na nauugnay sa pinakamalapit na NavigationStack o NavigationView. Gumagamit ang SwiftUI ng EnvironmentValue upang ipadala ang landas ng pag-navigate sa pamamagitan ng hierarchy ng View. Binabasa ng NavigationLink ang landas na ito mula sa Environment at binabago ito kapag pinindot.

Mga form ng inisyalisasyon ng NavigationLink

NavigationLink ay may dalawang pangunahing form: na may destination (direktang pagtukoy ng target na View) at may value (halaga para sa NavigationDestination). Ang pagpili ng form ay depende sa bersyon ng iOS at arkitektura ng pag-navigate.

Destination form (iOS 13+): NavigationLink(destination: DetailView(), label: { Text(“Open”) }). Ang form na ito ay lumilikha ng DetailView kaagad kapag nag-render ng NavigationLink, kahit na hindi pa pinindot ng gumagamit ang link. Ito ay nagdudulot ng maagang inisyalisasyon ng View at potensyal na problema sa pagganap kung ang target na View ay nagsasagawa ng mabibigat na operasyon sa inisyalisador.

Value form (iOS 16+): NavigationLink(value: “detail_42”, label: { Text(“Open”) }). Ang target na View ay nilikha lamang kapag pinindot ang link, kapag natagpuan ng SwiftUI ang kaukulang .navigationDestination. Pinipigilan nito ang maagang inisyalisasyon at ginagawang mas inaasahan ang pag-navigate.

NavigationLink na may NavigationStack: tamang paggamit

NavigationLink na may NavigationStack sa iOS 16+ ay nangangailangan ng paglipat sa value form. Tinutukoy mo ang uri ng data para sa pag-navigate (String, Int, enum Route) at nagrerehistro ng destination sa pamamagitan ng .navigationDestination. Ang NavigationLink ay naglalagay lamang ng halaga sa stack, at ang SwiftUI ay lumilikha ng target na View kapag pinindot.

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)
        }
    }
}

// Programatikong pag-navigate:
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("Buksan ang Mga Setting") {
                        path.append(AppRoute.settings)
                    }
                }
        }
    }
}

Programatikong pag-navigate: ang pagdaragdag ng halaga sa path (sa pamamagitan ng path.append) ay katumbas ng pagpindot sa NavigationLink na may parehong halaga. Ito ay nagbibigay-daan sa pagpapatupad ng pag-navigate mula sa ViewModel, Coordinator, o bilang tugon sa mga push notification.

IsActive form (NavigationLink(isActive:destination:label:)) ay available para sa compatibility, ngunit hindi inirerekomenda sa iOS 16+. Gamitin ang value form na may Binding sa array ng landas o NavigationPath.

NavigationLink sa List: mga katangian

NavigationLink sa List ay awtomatikong nagpapakita ng chevron arrow sa kanang bahagi ng row, na nagpapahiwatig sa gumagamit na ang pagpindot ay magdadala sa ibang screen. Ang List ay awtomatikong namamahala ng pagpapakita ng arrow — hindi tulad ng ordinaryong NavigationLink sa labas ng listahan, kung saan walang arrow.

Mula noong iOS 16, ang List na may NavigationLink ay awtomatikong gumagamit ng value form sa loob ng List(data:rowContent:). Kapag gumagamit ng ForEach sa loob ng List, ang arrow ng pagbubunyag ay awtomatikong idinaragdag din. Ang gawi na ito ay hindi maaaring i-off sa pamamagitan ng mga modifier — tanging ang pagpapalit ng NavigationLink ng Button ang makakapag-alis ng arrow.

Problema sa destination form sa List: kung gumagamit ka ng NavigationLink(destination:label:) sa loob ng List, lahat ng target na View ay nililikha kaagad kapag nag-load ang listahan, hindi alintana kung pinindot ng gumagamit ang link o hindi. Para sa mga listahan na may maraming row, ito ay maaaring makapagpabagal nang malaki sa paunang pag-load at makapagpataas ng konsumo ng memorya. Ang value form na may NavigationStack ay lumulutas sa problemang ito.

Ayon sa WWDC 2022 (Session 10054), inirerekomenda ng Apple ang paggamit ng NavigationStack at ang value form ng NavigationLink para sa mga bagong proyekto. Ito ay lalong mahalaga para sa List na may dinamikong data, kung saan ang bilang ng mga row ay maaaring malaki.

Mga pattern ng paggamit ng NavigationLink

Pattern 1: custom na hitsura ng NavigationLink. Ang NavigationLink ay tumatanggap ng anumang View bilang label, na nagpapahintulot sa paglikha ng anumang disenyo para sa link. Sa loob ng List, ito ay lalong maginhawa — nakakakuha ka ng arrow ng pagbubunyag awtomatiko kapag gumagamit ng NavigationLink.

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)
}

Pattern 2: NavigationLink na walang arrow (custom na pindutan). Kung hindi mo kailangan ang arrow ng pagbubunyag, gamitin ang Button para sa programatikong pag-navigate: path.append(value). Ito ay kapaki-pakinabang para sa custom na mga elemento ng interface kung saan ang NavigationLink ay mukhang hindi natural.

Pattern 3: kondisyonal na pag-navigate. Maaari mong i-block ang NavigationLink sa pamamagitan ng paggamit ng walang laman na destination o hindi pagdaragdag ng .navigationDestination para sa ilang mga halaga. Ang programatikong pag-navigate sa pamamagitan ng path ay nagpapahintulot sa pagsuri ng mga kondisyon bago magdagdag ng halaga.

Ayon sa Hacking with Swift (2024), ang karamihan sa mga problema sa NavigationLink ay nauugnay sa paggamit ng destination form sa mga lumang proyekto. Sa paglipat sa NavigationStack, palitan ang lahat ng NavigationLink(destination:label:) ng NavigationLink(value:label:) at magdagdag ng .navigationDestination sa root level.