NavigationStack: wat is het, navigatiestack in SwiftUI

Wat is NavigationStack in SwiftUI?

NavigationStack is een container View dat navigatie op basis van een stack (LIFO) implementeert. Het beheert de navigatiegeschiedenis, laat je nieuwe schermen op de stack plaatsen en terugkeren via de systeemknop «Terug» of programmatisch. NavigationStack maakt deel uit van SwiftUI vanaf iOS 16, iPadOS 16, macOS 13, watchOS 9 en tvOS 16.

De belangrijkste innovatie van NavigationStack is het typeveilige navigatiepad. In plaats van direct destination aan te geven bij het maken van NavigationLink, plaats je een waarde (value) in het pad, en de registratie van het doel-View gebeurt apart via de modifier .navigationDestination(for:destination:). Dit scheidt navigatie en weergave, waardoor de code modulairder en testbaarder wordt.

Volgens WWDC 2022 (Session 10054) gebruikt NavigationStack een nieuw navigatiemechanisme gebaseerd op ObservableObject en de SwiftUI-levenscyclus. In tegenstelling tot NavigationView, dat vertrouwde op UINavigationController onder de motorkap, is NavigationStack volledig geïmplementeerd in SwiftUI, wat de voorspelbaarheid en compatibiliteit met de SwiftUI-levenscyclus verbetert.

Basisstructuur van NavigationStack

NavigationStack accepteert een root-View en een optioneel navigatiepad (Binding naar NavigationPath of een array van Hashable-waarden). Alle onderliggende schermen worden op de stack geplaatst via NavigationLink of programmatische toevoeging van waarden aan het pad.

NavigationStack vs NavigationView: vergelijking

NavigationView was de primaire navigatiecontainer van SwiftUI tot iOS 16. Het beheerde automatisch UINavigationController onder de motorkap, wat leidde tot een reeks problemen: onvoorspelbaar gedrag bij gegevenswijzigingen, problemen met programmatische navigatie en gebrek aan typeveiligheid.

Belangrijkste voordeel van NavigationStack — typeveilige navigatie. Je definieert het pad als een array van concrete typen (of NavigationPath voor heterogene stacks) en registreert destination voor elk type. Dit elimineert typefouten en maakt navigatie voorspelbaar.

NavigationView is verouderd in iOS 17. Apple raadt migratie naar NavigationStack aan voor alle nieuwe projecten en bij het bijwerken van de minimale versie naar iOS 16.

NavigationPath: typeveilig stackbeheer

NavigationPath is een type dat het navigatiepad in NavigationStack vertegenwoordigt. Het kan heterogene waarden (AnyHashable) opslaan of worden gebruikt met een concreet type via Binding naar een array [T: Hashable]. NavigationPath wordt automatisch gecodeerd en gedecodeerd om de toestand te behouden.

struct ContentView: View {
    @State private var path = NavigationPath()

    var body: some View {
        NavigationStack(path: $path) {
            HomeView()
                .navigationDestination(for: String.self) { value in
                    DetailView(id: value)
                }
                .navigationDestination(for: Int.self) { value in
                    NumberView(number: value)
                }
        }
    }

    func goToRoot() {
        path.removeLast(path.count)
    }

    func pushDeepLink() {
        path.append("detail_42")
    }
}

Heterogene stack: NavigationPath kan waarden van verschillende typen bevatten, als ze Hashable implementeren. Het eerste scherm kan bijvoorbeeld String (ID) accepteren, het tweede — Int (nummer), het derde — een aangepaste enum Route. Voor weergave van elk type wordt een aparte .navigationDestination geregistreerd.

Codable ondersteuning: NavigationPath implementeert Codable als alle waarden in het pad ook Codable + Hashable zijn. Dit maakt het mogelijk om de navigatiestatus op te slaan en te herstellen bij het herstarten van de app of bij het overschakelen naar de achtergrond.

NavigationDestination: registratie van doelschermen

.navigationDestination(for:destination:) — een modifier die het doel-View registreert voor een specifiek gegevenstype. Wanneer NavigationLink een waarde van dit type in het pad plaatst, vindt SwiftUI automatisch de bijbehorende .navigationDestination en maakt het scherm aan.

enum AppRoute: Hashable {
    case profile(UserID)
    case settings
    case about
}

struct AppNavigation: View {
    @State private var path = NavigationPath()

    var body: some View {
        NavigationStack(path: $path) {
            HomeView()
                .navigationDestination(for: AppRoute.self) { route in
                    switch route {
                    case .profile(let id):
                        ProfileView(userId: id)
                    case .settings:
                        SettingsView()
                    case .about:
                        AboutView()
                    }
                }
        }
    }
}

// Navigate: path.append(AppRoute.profile("user_123"))

Belangrijke regel: .navigationDestination moet worden toegepast op een View dat zich binnen NavigationStack bevindt, en voordat NavigationLink een waarde in het pad plaatst. Meestal wordt het toegevoegd aan het root-View of aan de container van een sectie. Als .navigationDestination niet wordt gevonden voor het waardetype, vindt de overgang niet plaats.

Volgens SwiftUI Engineering (2023) kan .navigationDestination op verschillende niveaus van de hiërarchie worden geregistreerd. SwiftUI zoekt naar de dichtstbijzijnde passende destination bij een navigatiepoging. Dit maakt het mogelijk om destination voor één type in verschillende delen van de app te overschrijven.

NavigationStack gebruikspatronen

Patroon 1: navigatie via enum Route. Definieer een enum met bijbehorende waarden voor alle schermen van de app. Gebruik één .navigationDestination voor AppRoute en switch voor routering. Dit zorgt voor een enkele bron van waarheid voor alle mogelijke overgangen in de app.

struct StoreView: View {
    @State private var path: [ProductRoute] = []

    var body: some View {
        NavigationStack(path: $path) {
            ProductGrid()
                .navigationDestination(for: ProductRoute.self) { route in
                    switch route {
                    case .detail(let product):
                        ProductDetail(product: product)
                    case .reviews(let productId):
                        ReviewsView(productId: productId)
                    }
                }
        }
    }
}

enum ProductRoute: Hashable {
    case detail(Product)
    case reviews(String)
}

Patroon 2: programmatische navigatie en deep linking. NavigationStack maakt programmatisch beheer van de stack mogelijk: schermen toevoegen, verwijderen en terugkeren naar de root. Dit is nodig voor pushmeldingen, diepe links en het herstellen van navigatie na herstart.

Patroon 3: array van typen in plaats van NavigationPath. Als alle schermen één type gebruiken (bijv. String of een aangepaste enum), gebruik dan Binding naar [T]. Dit biedt strengere typering en betere prestaties dan NavigationPath. NavigationPath is gerechtvaardigd voor heterogene stacks met verschillende schermtypen.

Volgens Point-Free (2024) is NavigationStack met enum Route de voorkeursmanier om navigatie in SwiftUI-apps te organiseren. Het maakt alle mogelijke overgangen expliciet, typeveilig en testbaar, wat vooral belangrijk is voor grote projecten met tientallen schermen.