NavigationView: podstawy, stos nawigacji w aplikacjach SwiftUI

Czym jest NavigationView?

NavigationView — kontener SwiftUI, który otacza hierarchię ekranów i udostępnia interfejs nawigacyjny. Wewnątrz NavigationView działa NavigationLink — element, po kliknięciu którego bieżący ekran jest zastępowany nowym. NavigationView automatycznie dodaje navigation bar z tytułem i przyciskiem «Wstecz».

NavigationView pojawił się w iOS 13 razem z SwiftUI. Koncepcyjnie zastępuje UINavigationController z UIKit, ale jest zaimplementowany deklaratywnie. Zamiast ręcznego push/pop programista opisuje połączenia między ekranami przez NavigationLink. System automatycznie zarządza stosem.

NavigationView obsługuje modyfikatory .navigationTitle, .navigationBarTitleDisplayMode, .toolbar i .searchable. Dla iOS 16+ Apple wprowadziła NavigationStack, który zachowuje API NavigationView, ale dodaje programowe zarządzanie stosem przez NavigationPath. Dla projektów wspierających iOS 15 i starsze NavigationView pozostaje jedyną opcją.

NavigationLink i przejścia między ekranami

NavigationLink — element SwiftUI tworzący przejście do docelowego ekranu wewnątrz NavigationView lub NavigationStack. Po kliknięciu NavigationLink system dodaje docelowy ekran do stosu nawigacji. Animacja przejścia — standardowe push z prawej dla iOS, dostosowuje się do platformy.

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

struct DetailView: View {
    let item: Item

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

NavigationLink przyjmuje dwa parametry: destination — docelowy widok, oraz label — element, na który użytkownik klika. Dla list wygodny jest składnia z value i NavigationLink(value:), który automatycznie odznacza komórkę i współpracuje z NavigationPath.

NavigationStack vs NavigationView: porównanie API

Od iOS 16 Apple przedstawiła NavigationStack jako zamiennik NavigationView. NavigationStack zachowuje deklaratywną składnię, ale dodaje krytycznie ważną możliwość — programowe zarządzanie stosem przez właściwość path typu NavigationPath lub tablicy Hashable.

Dla projektów z minimalną wersją iOS 16+ używaj NavigationStack. Dla wsparcia iOS 14-15 — NavigationView. NavigationStack nie ma bezpośrednich odpowiedników dla starych wersji, więc aktualizacja wymaga sprawdzenia kompatybilności.

Toolbar i konfiguracja navigationTitle

Modyfikatory .toolbar i .navigationTitle zarządzają zawartością paska nawigacyjnego. .navigationTitle ustawia tytuł ekranu, .navigationBarTitleDisplayMode wybiera styl: .large (duży, domyślnie) lub .inline (kompaktowy, jak w Ustawieniach). .toolbar dodaje przyciski, wyszukiwanie i kontrolę segmentową.

struct SettingsView: View {
    var body: some View {
        NavigationStack {
            Form {
                Section("Profil") {
                    Text("Nazwa użytkownika")
                    Toggle("Powiadomienia", isOn: $notifications)
                }
            }
            .navigationTitle("Ustawienia")
            .navigationBarTitleDisplayMode(.large)
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("Zapisz") { save() }
                }
                ToolbarItem(placement: .navigationBarLeading) {
                    EditButton()
                }
            }
        }
    }
}

.searchable — kolejny modyfikator, integrujący pasek wyszukiwania z navigation bar. Działa zarówno z NavigationView, jak i NavigationStack. Wyszukiwanie automatycznie ukrywa się podczas przewijania i pokazuje przy przesunięciu w dół. Obsługuje filtrowanie listy przez Binding String.

Programowa nawigacja z NavigationPath

NavigationPath — typ iOS 16+, reprezentujący stos nawigacji jako kolekcję wartości Hashable. Programista dodaje elementy do path dla programowego przejścia, usuwa dla powrotu. NavigationPath obsługuje głębokie linki, powiadomienia push i przywracanie stanu.

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

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

        // Programistyczne przejście przez deep link
        .onOpenURL { url in
            guard let productId = DeepLinkParser.parse(url) else { return }
            path.append(Product(id: productId))
        }
    }
}

.navigationDestination(for:) rejestruje typ danych, dla którego ma być pokazany ekran. Gdy do path dodawana jest wartość tego typu, system automatycznie tworzy docelowy widok. Takie podejście zastępuje jawny NavigationLink(destination:) i czyni nawigację ściśle typowaną.

NavigationView na iPad, watchOS i tvOS

NavigationView i NavigationStack działają na wszystkich platformach Apple: iOS, iPadOS, watchOS, tvOS i macOS. Zachowanie dostosowuje się do ekranu. Na iPad NavigationStack obsługuje NavigationSplitView, który zastępuje UISplitViewController z UIKit i wyświetla dwie kolumny na szerokim ekranie.

NavigationSplitView (iOS 16+) dzieli ekran na sidebar (lista) i detail (szczegóły). Na iPhone sidebar jest ukryty, pokazując tylko detail przez NavigationLink. Na iPad sidebar i detail są wyświetlane jednocześnie w trybie split.

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

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

NavigationSplitView automatycznie wybiera optymalny tryb wyświetlania dla każdego urządzenia. Na iPhone w trybie portretowym — stos, na iPad i iPhone w landscape — split. Programista nie musi pisać osobnego kodu dla różnych size classes.