NavigationView: basis, navigatiestapel in SwiftUI-applicaties

Wat is NavigationView?

NavigationView — een SwiftUI-container die een hiërarchie van schermen omvat en een navigatie-interface biedt. Binnen NavigationView werkt NavigationLink — een element dat bij indrukken het huidige scherm vervangt door een nieuw. NavigationView voegt automatisch een navigation bar met titel en «Terug»-knop toe.

NavigationView verscheen in iOS 13 samen met SwiftUI. Conceptueel vervangt het UINavigationController uit UIKit, maar is declaratief geïmplementeerd. In plaats van handmatig push/pop beschrijft de ontwikkelaar de verbinding tussen schermen via NavigationLink. Het systeem beheert automatisch de stapel.

NavigationView ondersteunt de modifiers .navigationTitle, .navigationBarTitleDisplayMode, .toolbar en .searchable. Voor iOS 16+ introduceerde Apple NavigationStack, dat de API van NavigationView behoudt, maar programmatisch stapelbeheer via NavigationPath toevoegt. Voor projecten die iOS 15 en ouder ondersteunen, blijft NavigationView de enige optie.

NavigationLink en overgangen tussen schermen

NavigationLink — een SwiftUI-element dat een overgang naar het doelscherm maakt binnen NavigationView of NavigationStack. Bij indrukken van NavigationLink voegt het systeem het doelscherm toe aan de navigatiestapel. De overgangsanimatie is een standaard push van rechts voor iOS, aangepast aan het platform.

struct ContentView: View {
    var body: some View {
        NavigationView {
            List(items) { item in
                NavigationLink(destination: DetailView(item: item)) {
                    Text(item.title)
                }
            }
            .navigationTitle("Lijst")
        }
    }
}

struct DetailView: View {
    let item: Item

    var body: some View {
        VStack {
            Text(item.description)
                .navigationTitle(item.title)
                .navigationBarTitleDisplayMode(.inline)
        }
    }
}

NavigationLink accepteert twee parameters: destination — de doel-View, en label — het element waar de gebruiker op klikt. Voor lijsten is de syntaxis met value en NavigationLink(value:) handig, die automatisch de cel deselecteert en werkt met NavigationPath.

NavigationStack vs NavigationView: API-vergelijking

Sinds iOS 16 heeft Apple NavigationStack geïntroduceerd als vervanging voor NavigationView. NavigationStack behoudt de declaratieve syntaxis, maar voegt een kritieke mogelijkheid toe — programmatisch stapelbeheer via de eigenschap path van het type NavigationPath of een array van Hashable.

Gebruik voor projecten met minimale iOS 16+ versie NavigationStack. Voor ondersteuning van iOS 14-15 — NavigationView. NavigationStack heeft geen directe analogen voor oude versies, dus upgrade vereist compatibiliteitscontrole.

Toolbar en navigationTitle-configuratie

De modifiers .toolbar en .navigationTitle beheren de inhoud van de navigatiebalk. .navigationTitle stelt de schermtitel in, .navigationBarTitleDisplayMode kiest de stijl: .large (groot, standaard) of .inline (compact, zoals in Instellingen). .toolbar voegt knoppen, zoekopdracht en gesegmenteerde controle toe.

struct SettingsView: View {
    var body: some View {
        NavigationStack {
            Form {
                Section("Profiel") {
                    Text("Gebruikersnaam")
                    Toggle("Meldingen", isOn: $notifications)
                }
            }
            .navigationTitle("Instellingen")
            .navigationBarTitleDisplayMode(.large)
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("Opslaan") { save() }
                }
                ToolbarItem(placement: .navigationBarLeading) {
                    EditButton()
                }
            }
        }
    }
}

.searchable — nog een modifier die de zoekbalk in de navigation bar integreert. Werkt zowel met NavigationView als NavigationStack. Zoeken wordt automatisch verborgen tijdens scrollen en getoond bij naar beneden vegen. Ondersteunt lijstfiltering via Binding String.

Programmatische navigatie met NavigationPath

NavigationPath — een iOS 16+ type dat de navigatiestapel voorstelt als een verzameling Hashable-waarden. De ontwikkelaar voegt elementen toe aan path voor programmatische overgang, verwijdert ze voor terugkeer. NavigationPath ondersteunt diepe links, pushmeldingen en statusherstel.

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

    var body: some View {
        NavigationStack(path: $path) {
            List(categories) { category in
                NavigationLink("Categorie \(category.name)",
                               value: category)
            }
            .navigationTitle("Categorieën")
            .navigationDestination(for: Category.self) { category in
                ProductListView(category: category)
            }
            .navigationDestination(for: Product.self) { product in
                ProductDetailView(product: product)
            }
        }

        // Programmatische overgang via deep link
        .onOpenURL { url in
            guard let productId = DeepLinkParser.parse(url) else { return }
            path.append(Product(id: productId))
        }
    }
}

.navigationDestination(for:) registreert het gegevenstype waarvoor een scherm moet worden getoond. Wanneer een waarde van dit type aan path wordt toegevoegd, maakt het systeem automatisch de doel-View aan. Deze aanpak vervangt expliciete NavigationLink(destination:) en maakt navigatie strikt getypeerd.

NavigationView op iPad, watchOS en tvOS

NavigationView en NavigationStack werken op alle Apple-platforms: iOS, iPadOS, watchOS, tvOS en macOS. Het gedrag past zich aan het scherm aan. Op iPad ondersteunt NavigationStack NavigationSplitView, dat UISplitViewController uit UIKit vervangt en twee kolommen toont op een breed scherm.

NavigationSplitView (iOS 16+) verdeelt het scherm in sidebar (lijst) en detail (details). Op iPhone is de sidebar verborgen en wordt alleen detail getoond via NavigationLink. Op iPad worden sidebar en detail gelijktijdig getoond in split-modus.

struct AdaptiveNavigation: View {
    @State private var selectedCategory: Category?

    var body: some View {
        NavigationSplitView {
            List(categories, selection: $selectedCategory) { category in
                Text(category.name)
            }
            .navigationTitle("Categorieën")
        } detail: {
            ProductListView(category: selectedCategory)
        }
    }
}

NavigationSplitView kiest automatisch de optimale weergavemodus voor elk apparaat. Op iPhone in portretmodus — stapel, op iPad en iPhone in landschapmodus — split. De ontwikkelaar hoeft geen aparte code te schrijven voor verschillende size classes.