NavigationLink — wat is het, overgangsknop in SwiftUI

Wat is NavigationLink in SwiftUI?

NavigationLink is een View die bij het indrukken een navigatieovergang initieert. Binnen NavigationStack plaatst het indrukken van NavigationLink het doelscherm op de stapel en toont de systeemknop „Terug”. NavigationLink bestaat sinds iOS 13 en is de primaire manier van gebruikersnavigatie in SwiftUI.

NavigationLink erft niet van UIButton — het is een SwiftUI View die zich automatisch aanpast aan de context. Binnen List wordt NavigationLink weergegeven met een openvouw-indicator (disclosure indicator). Buiten de lijst gedraagt NavigationLink zich als een gewone knop, maar met navigatiegedrag.

Volgens SwiftUI Lab (2024) is NavigationLink een van de meest gebruikte Views in SwiftUI-applicaties, alleen overtroffen door Text, Image en VStack. Inzicht in de verschillen tussen initialisatievormen is cruciaal voor prestaties en voorspelbaar navigatiegedrag.

Hoe NavigationLink onder de motorkap werkt

Bij indrukken voegt NavigationLink een waarde (of destination) toe aan de navigatiestapel die is gekoppeld aan de dichtstbijzijnde NavigationStack of NavigationView. SwiftUI gebruikt EnvironmentValue om het navigatiepad door de View-hiërarchie te sturen. NavigationLink leest dit pad uit Environment en wijzigt het bij indrukken.

Initialisatievormen van NavigationLink

NavigationLink heeft twee hoofdvormen: met destination (directe verwijzing naar de doel-View) en met value (waarde voor NavigationDestination). De keuze van de vorm hangt af van de iOS-versie en de navigatiearchitectuur.

Destination-vorm (iOS 13+): NavigationLink(destination: DetailView(), label: { Text(„Open”) }). Deze vorm maakt DetailView onmiddellijk aan bij het renderen van NavigationLink, zelfs als de gebruiker niet op de link heeft geklikt. Dit leidt tot vroegtijdige initialisatie van de View en mogelijke prestatieproblemen als de doel-View zware bewerkingen in de initialisator uitvoert.

Value-vorm (iOS 16+): NavigationLink(value: „detail_42”, label: { Text(„Open”) }). De doel-View wordt alleen aangemaakt bij het klikken op de link, wanneer SwiftUI de bijbehorende .navigationDestination vindt. Dit voorkomt vroegtijdige initialisatie en maakt navigatie voorspelbaarder.

NavigationLink met NavigationStack: correct gebruik

NavigationLink met NavigationStack in iOS 16+ vereist de overstap naar de value-vorm. U definieert het gegevenstype voor navigatie (String, Int, enum Route) en registreert de destination via .navigationDestination. NavigationLink plaatst alleen de waarde in de stapel en SwiftUI maakt de doel-View aan bij het klikken.

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

// Programmatische navigatie:
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("Instellingen openen") {
                        path.append(AppRoute.settings)
                    }
                }
        }
    }
}

Programmatische navigatie: het toevoegen van een waarde aan path (via path.append) is gelijk aan het klikken op NavigationLink met dezelfde waarde. Dit maakt het mogelijk om navigatie te implementeren vanuit ViewModel, Coordinator of als reactie op pushmeldingen.

IsActive-vorm (NavigationLink(isActive:destination:label:)) is beschikbaar voor compatibiliteit, maar wordt niet aanbevolen in iOS 16+. Gebruik de value-vorm met Binding naar een pad-array of NavigationPath.

NavigationLink in List: kenmerken

NavigationLink in List toont automatisch een openvouw-pijl (chevron) aan de rechterkant van de rij, waarmee de gebruiker wordt gesignaleerd dat klikken naar een ander scherm leidt. List beheert de weergave van de pijl automatisch — in tegenstelling tot een gewone NavigationLink buiten de lijst, waar geen pijl is.

Vanaf iOS 16 gebruikt List met NavigationLink automatisch de value-vorm binnen List(data:rowContent:). Bij gebruik van ForEach binnen List wordt de openvouw-pijl ook automatisch toegevoegd. Dit gedrag kan niet worden uitgeschakeld via modifiers — alleen het vervangen van NavigationLink door Button kan de pijl verwijderen.

Probleem met de destination-vorm in List: als u NavigationLink(destination:label:) binnen List gebruikt, worden alle doel-Views onmiddellijk aangemaakt bij het laden van de lijst, ongeacht of de gebruiker op de link heeft geklikt of niet. Voor lijsten met een groot aantal rijen kan dit de initiële laadtijd aanzienlijk vertragen en het geheugengebruik verhogen. De value-vorm met NavigationStack lost dit probleem op.

Volgens WWDC 2022 (Session 10054) beveelt Apple het gebruik van NavigationStack en de value-vorm van NavigationLink aan voor nieuwe projecten. Dit is vooral belangrijk voor List met dynamische gegevens, waar het aantal rijen groot kan zijn.

Patronen voor het gebruik van NavigationLink

Patroon 1: aangepaste weergave van NavigationLink. NavigationLink accepteert elke View als label, waardoor u een willekeurig ontwerp voor de link kunt maken. Binnen List is dit bijzonder handig — u krijgt automatisch de openvouw-pijl bij gebruik van 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)
}

Patroon 2: NavigationLink zonder pijl (aangepaste knop). Als u geen openvouw-pijl nodig hebt, gebruikt u Button voor programmatische navigatie: path.append(value). Dit is handig voor aangepaste interface-elementen waar NavigationLink onnatuurlijk oogt.

Patroon 3: conditionele navigatie. U kunt NavigationLink blokkeren door een lege destination te gebruiken of door geen .navigationDestination toe te voegen voor bepaalde waarden. Programmatische navigatie via path maakt het mogelijk om voorwaarden te controleren voordat u een waarde toevoegt.

Volgens Hacking with Swift (2024) houden de meeste problemen met NavigationLink verband met het gebruik van de destination-vorm in oudere projecten. Bij migratie naar NavigationStack vervangt u alle NavigationLink(destination:label:) door NavigationLink(value:label:) en voegt u .navigationDestination op het hoofdniveau toe.