NavigationLink — vad är det, övergångsknapp i SwiftUI

Vad är NavigationLink i SwiftUI?

NavigationLink är en View som vid tryckning initierar en navigationsövergång. Inuti NavigationStack placerar tryckning på NavigationLink målsidan i stacken och visar systemknappen “Tillbaka”. NavigationLink har funnits sedan iOS 13 och är det primära sättet för användarnavigering i SwiftUI.

NavigationLink ärver inte från UIButton — det är en SwiftUI View som automatiskt anpassar sig till sammanhanget. Inuti List visas NavigationLink med en avslöjande indikator (disclosure indicator). Utanför listan beter sig NavigationLink som en vanlig knapp, men med navigationsbeteende.

Enligt SwiftUI Lab (2024) är NavigationLink en av de mest använda Views i SwiftUI-applikationer, endast efter Text, Image och VStack. Att förstå skillnaderna mellan initieringsformerna är avgörande för prestanda och förutsägbar navigering.

Hur NavigationLink fungerar under huven

Vid tryckning lägger NavigationLink till ett värde (eller destination) i navigationsstacken som är kopplad till närmaste NavigationStack eller NavigationView. SwiftUI använder EnvironmentValue för att skicka navigeringsvägen genom View-hierarkin. NavigationLink läser denna väg från Environment och ändrar den vid tryckning.

Initieringsformer för NavigationLink

NavigationLink har två huvudformer: med destination (direkt angivelse av mål-View) och med value (värde för NavigationDestination). Valet av form beror på iOS-versionen och navigeringsarkitekturen.

Destination-form (iOS 13+): NavigationLink(destination: DetailView(), label: { Text(“Open”) }). Denna form skapar DetailView omedelbart vid rendering av NavigationLink, även om användaren inte har klickat på länken. Detta leder till för tidig initiering av View och potentiella prestandaproblem om mål-View utför tunga operationer i initieraren.

Value-form (iOS 16+): NavigationLink(value: “detail_42”, label: { Text(“Open”) }). Mål-View skapas endast när länken klickas, när SwiftUI hittar motsvarande .navigationDestination. Detta förhindrar för tidig initiering och gör navigeringen mer förutsägbar.

NavigationLink med NavigationStack: korrekt användning

NavigationLink med NavigationStack i iOS 16+ kräver övergång till value-form. Du definierar datatypen för navigering (String, Int, enum Route) och registrerar destination via .navigationDestination. NavigationLink placerar endast värdet i stacken, och SwiftUI skapar mål-View vid klick.

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

// Programmatisk navigering:
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("Öppna Inställningar") {
                        path.append(AppRoute.settings)
                    }
                }
        }
    }
}

Programmatisk navigering: att lägga till ett värde i path (via path.append) motsvarar att klicka på NavigationLink med samma värde. Detta möjliggör implementering av navigering från ViewModel, Coordinator eller som svar på push-notiser.

IsActive-form (NavigationLink(isActive:destination:label:)) är tillgänglig för kompatibilitet, men rekommenderas inte i iOS 16+. Använd value-form med Binding till en sökvägsarray eller NavigationPath.

NavigationLink i List: egenskaper

NavigationLink i List visar automatiskt en avslöjande pil (chevron) på höger sida av raden, vilket signalerar att ett klick leder till en annan skärm. List hanterar visningen av pilen automatiskt — till skillnad från en vanlig NavigationLink utanför listan, där det inte finns någon pil.

Från och med iOS 16 använder List med NavigationLink automatiskt value-form inuti List(data:rowContent:). Vid användning av ForEach inuti List läggs den avslöjande pilen också till automatiskt. Detta beteende kan inte stängas av via modifierare — endast att ersätta NavigationLink med Button kan ta bort pilen.

Problem med destination-form i List: om du använder NavigationLink(destination:label:) inuti List skapas alla mål-Views omedelbart när listan läses in, oavsett om användaren har klickat på länken eller inte. För listor med många rader kan detta avsevärt sakta ner den första inläsningen och öka minnesförbrukningen. Value-form med NavigationStack löser detta problem.

Enligt WWDC 2022 (Session 10054) rekommenderar Apple att använda NavigationStack och value-form för NavigationLink för nya projekt. Detta är särskilt viktigt för List med dynamisk data, där antalet rader kan vara stort.

Mönster för användning av NavigationLink

Mönster 1: anpassat utseende för NavigationLink. NavigationLink accepterar vilken View som helst som label, vilket gör det möjligt att skapa en godtycklig design för länken. Inuti List är detta särskilt bekvämt — du får den avslöjande pilen automatiskt när du använder 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)
}

Mönster 2: NavigationLink utan pil (anpassad knapp). Om du inte behöver den avslöjande pilen, använd Button för programmatisk navigering: path.append(value). Detta är användbart för anpassade gränssnittselement där NavigationLink ser onaturligt ut.

Mönster 3: villkorlig navigering. Du kan blockera NavigationLink genom att använda tom destination eller inte lägga till .navigationDestination för vissa värden. Programmatisk navigering via path gör det möjligt att kontrollera villkor innan du lägger till ett värde.

Enligt Hacking with Swift (2024) är de flesta problem med NavigationLink relaterade till användningen av destination-form i äldre projekt. Vid migrering till NavigationStack, ersätt alla NavigationLink(destination:label:) med NavigationLink(value:label:) och lägg till .navigationDestination på rotnivå.