NavigationLink — was ist das, Übergangsschaltfläche in SwiftUI

Was ist NavigationLink in SwiftUI?

NavigationLink ist eine View, die bei Betätigung einen Navigationsübergang einleitet. Innerhalb von NavigationStack legt das Drücken von NavigationLink den Zielbildschirm auf den Stapel und zeigt die systemische Zurück-Schaltfläche an. NavigationLink existiert seit iOS 13 und ist die primäre Methode der Benutzernavigation in SwiftUI.

NavigationLink erbt nicht von UIButton — es ist eine SwiftUI-View, die sich automatisch an den Kontext anpasst. Innerhalb von List wird NavigationLink mit einem Offenlegungsindikator angezeigt. Außerhalb einer Liste verhält sich NavigationLink wie eine normale Schaltfläche, jedoch mit Navigationsverhalten.

Laut SwiftUI Lab (2024) ist NavigationLink eine der am häufigsten verwendeten Views in SwiftUI-Anwendungen, übertroffen nur von Text, Image und VStack. Die Unterschiede zwischen den Initialisierungsformen zu verstehen, ist entscheidend für die Leistung und das vorhersagbare Navigationsverhalten.

Wie NavigationLink intern funktioniert

Bei Betätigung fügt NavigationLink einen Wert (oder destination) zum Navigationsstapel hinzu, der dem nächstgelegenen NavigationStack oder NavigationView zugeordnet ist. SwiftUI verwendet EnvironmentValue, um den Navigationspfad durch die View-Hierarchie zu leiten. NavigationLink liest diesen Pfad aus der Environment und ändert ihn bei Betätigung.

Initialisierungsformen von NavigationLink

NavigationLink hat zwei Hauptformen: mit destination (direkte Angabe der Ziel-View) und mit value (Wert für NavigationDestination). Die Wahl der Form hängt von der iOS-Version und der Navigationsarchitektur ab.

Destination-Form (iOS 13+): NavigationLink(destination: DetailView(), label: { Text("Open") }). Diese Form erstellt DetailView sofort beim Rendern von NavigationLink, selbst wenn der Benutzer nicht auf den Link geklickt hat. Dies führt zu einer vorzeitigen View-Initialisierung und möglichen Leistungsproblemen, wenn die Ziel-View schwere Operationen in ihrem Initialisierer ausführt.

Value-Form (iOS 16+): NavigationLink(value: "detail_42", label: { Text("Open") }). Die Ziel-View wird nur erstellt, wenn der Link gedrückt wird, wenn SwiftUI die entsprechende .navigationDestination findet. Dies verhindert eine vorzeitige Initialisierung und macht die Navigation vorhersagbarer.

NavigationLink mit NavigationStack: Richtige Verwendung

NavigationLink mit NavigationStack unter iOS 16+ erfordert die Umstellung auf die Value-Form. Sie definieren einen Datentyp für die Navigation (String, Int, enum Route) und registrieren das Ziel über .navigationDestination. NavigationLink legt nur den Wert auf den Stapel, und SwiftUI erstellt die Ziel-View bei Betätigung.

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

// Programmatic navigation:
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("Open Settings") {
                        path.append(AppRoute.settings)
                    }
                }
        }
    }
}

Programmatische Navigation: Das Hinzufügen eines Werts zum Pfad (über path.append) entspricht dem Drücken eines NavigationLink mit demselben Wert. Dies ermöglicht die Implementierung der Navigation von ViewModel, Coordinator oder als Reaktion auf Push-Benachrichtigungen.

IsActive-Form (NavigationLink(isActive:destination:label:)) ist aus Kompatibilitätsgründen verfügbar, wird aber unter iOS 16+ nicht empfohlen. Verwenden Sie die Value-Form mit Binding an ein Pfad-Array oder NavigationPath.

NavigationLink in List: Besonderheiten

NavigationLink in List zeigt automatisch einen Offenlegungsindikator (Chevron) auf der rechten Seite der Zeile an, der dem Benutzer signalisiert, dass das Drücken zu einem anderen Bildschirm führt. List verwaltet die Pfeilanzeige automatisch — im Gegensatz zu einem normalen NavigationLink außerhalb einer Liste, wo kein Pfeil vorhanden ist.

Mit iOS 16 verwendet List mit NavigationLink automatisch die Value-Form innerhalb von List(data:rowContent:). Bei Verwendung von ForEach innerhalb von List wird der Offenlegungsindikator ebenfalls automatisch hinzugefügt. Dieses Verhalten kann nicht durch Modifikatoren deaktiviert werden — nur das Ersetzen von NavigationLink durch Button kann den Pfeil entfernen.

Problem mit der Destination-Form in List: Wenn Sie NavigationLink(destination:label:) innerhalb von List verwenden, werden alle Ziel-Views sofort beim Laden der Liste erstellt, unabhängig davon, ob der Benutzer auf den Link geklickt hat oder nicht. Bei Listen mit einer großen Anzahl von Zeilen kann dies das anfängliche Laden erheblich verlangsamen und den Speicherverbrauch erhöhen. Die Value-Form mit NavigationStack löst dieses Problem.

Laut WWDC 2022 (Session 10054) empfiehlt Apple die Verwendung von NavigationStack und der Value-Form von NavigationLink für neue Projekte. Dies ist besonders wichtig für List mit dynamischen Daten, bei denen die Anzahl der Zeilen groß sein kann.

Verwendungsmuster von NavigationLink

Muster 1: Benutzerdefiniertes Erscheinungsbild von NavigationLink. NavigationLink akzeptiert jede View als Label und ermöglicht so die Erstellung benutzerdefinierter Designs für den Link. Innerhalb von List ist dies besonders praktisch — Sie erhalten bei Verwendung von NavigationLink automatisch einen Offenlegungsindikator.

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

Muster 2: NavigationLink ohne Pfeil (benutzerdefinierte Schaltfläche). Wenn Sie keinen Offenlegungsindikator benötigen, verwenden Sie Button für die programmatische Navigation: path.append(value). Dies ist nützlich für benutzerdefinierte Oberflächenelemente, bei denen NavigationLink unnatürlich wirkt.

Muster 3: Bedingte Navigation. Sie können NavigationLink blockieren, indem Sie ein leeres destination verwenden oder .navigationDestination für bestimmte Werte nicht hinzufügen. Die programmatische Navigation über den Pfad ermöglicht die Überprüfung von Bedingungen vor dem Hinzufügen eines Werts.

Laut Hacking with Swift (2024) stehen die meisten Probleme mit NavigationLink im Zusammenhang mit der Verwendung der Destination-Form in älteren Projekten. Ersetzen Sie bei der Migration zu NavigationStack alle NavigationLink(destination:label:) durch NavigationLink(value:label:) und fügen Sie .navigationDestination auf der Stammebene hinzu.