NavigationView: Grundlagen, Navigationsstapel in SwiftUI-Apps

Was ist NavigationView?

NavigationView ist ein SwiftUI-Container, der eine Hierarchie von Bildschirmen umschließt und eine Navigationsschnittstelle bereitstellt. Innerhalb von NavigationView funktioniert NavigationLink — ein Element, das beim Drücken den aktuellen Bildschirm durch einen neuen ersetzt. NavigationView fügt automatisch eine Navigationsleiste mit Titel und «Zurück»-Button hinzu.

NavigationView erschien mit SwiftUI in iOS 13. Konzeptionell ersetzt es UINavigationController aus UIKit, ist aber deklarativ implementiert. Statt manuellem Push/Pop beschreibt der Entwickler die Beziehung zwischen Bildschirmen über NavigationLink. Das System verwaltet den Stapel automatisch.

NavigationView unterstützt die Modifikatoren .navigationTitle, .navigationBarTitleDisplayMode, .toolbar und .searchable. Für iOS 16+ führte Apple NavigationStack ein, das die NavigationView-API beibehält, aber programmatische Stapelverwaltung über NavigationPath hinzufügt. Für Projekte mit Unterstützung für iOS 15 und älter bleibt NavigationView die einzige Option.

NavigationLink und Übergänge zwischen Bildschirmen

NavigationLink ist ein SwiftUI-Element, das einen Übergang zu einem Zielbildschirm innerhalb von NavigationView oder NavigationStack erstellt. Beim Drücken von NavigationLink fügt das System den Zielbildschirm zum Navigationsstapel hinzu. Die Übergangsanimation ist der standardmäßige Push von rechts auf iOS, der sich an die Plattform anpasst.

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

struct DetailView: View {
    let item: Item

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

NavigationLink akzeptiert zwei Parameter: destination — die Ziel-View, und label — das Element, auf das der Benutzer drückt. Für Listen ist die Syntax mit value und NavigationLink(value:) praktisch — sie hebt die Zelle automatisch hervor und funktioniert mit NavigationPath.

NavigationStack vs NavigationView: API-Vergleich

Mit iOS 16 führte Apple NavigationStack als Ersatz für NavigationView ein. NavigationStack behält die deklarative Syntax bei, fügt aber eine kritisch wichtige Funktion hinzu — programmatische Stapelverwaltung über die path-Eigenschaft vom Typ NavigationPath oder einem Array von Hashable.

Für Projekte mit Mindestversion iOS 16+ verwenden Sie NavigationStack. Für iOS 14-15-Unterstützung — NavigationView. NavigationStack hat keine direkten Analoga für ältere Versionen, daher erfordert ein Upgrade eine Kompatibilitätsprüfung.

Toolbar und navigationTitle-Konfiguration

Die Modifikatoren .toolbar und .navigationTitle steuern den Inhalt der Navigationsleiste. .navigationTitle legt den Bildschirmtitel fest, .navigationBarTitleDisplayMode wählt den Stil: .large (groß, Standard) oder .inline (kompakt, wie in Einstellungen). .toolbar fügt Schaltflächen, Suche und segmentierte Steuerung hinzu.

struct SettingsView: View {
    var body: some View {
        NavigationStack {
            Form {
                Section("Profil") {
                    Text("Benutzername")
                    Toggle("Benachrichtigungen", isOn: $notifications)
                }
            }
            .navigationTitle("Einstellungen")
            .navigationBarTitleDisplayMode(.large)
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("Speichern") { save() }
                }
                ToolbarItem(placement: .navigationBarLeading) {
                    EditButton()
                }
            }
        }
    }
}

.searchable ist ein weiterer Modifikator, der eine Suchleiste in die Navigationsleiste integriert. Funktioniert sowohl mit NavigationView als auch mit NavigationStack. Die Suche wird beim Scrollen automatisch ausgeblendet und beim Wischen nach unten angezeigt. Unterstützt Listenfilterung über einen Binding String.

Programmatische Navigation mit NavigationPath

NavigationPath ist ein iOS 16+-Typ, der einen Navigationsstapel als Sammlung von Hashable-Werten darstellt. Der Entwickler fügt Elemente zum path für programmatische Übergänge hinzu und entfernt sie zur Rückkehr. NavigationPath unterstützt Deep Links, Push-Benachrichtigungen und Zustandswiederherstellung.

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

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

        // Programmatischer Übergang per Deep Link
        .onOpenURL { url in
            guard let productId = DeepLinkParser.parse(url) else { return }
            path.append(Product(id: productId))
        }
    }
}

.navigationDestination(for:) registriert einen Datentyp, für den ein Bildschirm angezeigt werden soll. Wenn ein Wert dieses Typs zum path hinzugefügt wird, erstellt das System automatisch die Ziel-View. Dieser Ansatz ersetzt explizites NavigationLink(destination:) und macht die Navigation streng typisiert.

NavigationView auf iPad, watchOS und tvOS

NavigationView und NavigationStack funktionieren auf allen Apple-Plattformen: iOS, iPadOS, watchOS, tvOS und macOS. Das Verhalten passt sich dem Bildschirm an. Auf dem iPad unterstützt NavigationStack NavigationSplitView, das UISplitViewController aus UIKit ersetzt und zwei Spalten auf einem breiten Bildschirm anzeigt.

NavigationSplitView (iOS 16+) teilt den Bildschirm in Seitenleiste (Liste) und Detail. Auf dem iPhone wird die Seitenleiste ausgeblendet und zeigt nur Details über NavigationLink an. Auf dem iPad werden Seitenleiste und Detail gleichzeitig im Split-Modus angezeigt.

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

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

NavigationSplitView wählt automatisch den optimalen Anzeigemodus für jedes Gerät. Auf dem iPhone im Hochformat — Stapel, auf iPad und iPhone im Querformat — Split. Der Entwickler muss keinen separaten Code für verschiedene Größenklassen schreiben.