NavigationView: grunder, navigationsstack i SwiftUI-applikationer

Vad är NavigationView?

NavigationView — en SwiftUI-container som omsluter en hierarki av skärmar och tillhandahåller ett navigeringsgränssnitt. Inuti NavigationView fungerar NavigationLink — ett element som vid tryckning ersätter den aktuella skärmen med en ny. NavigationView lägger automatiskt till navigation bar med titel och «Tillbaka»-knapp.

NavigationView dök upp i iOS 13 tillsammans med SwiftUI. Konceptuellt ersätter det UINavigationController från UIKit, men är implementerat deklarativt. Istället för manuell push/pop beskriver utvecklaren kopplingen mellan skärmar via NavigationLink. Systemet hanterar automatiskt stacken.

NavigationView stöder modifierarna .navigationTitle, .navigationBarTitleDisplayMode, .toolbar och .searchable. För iOS 16+ introducerade Apple NavigationStack, som behåller NavigationView API men lägger till programmatisk stackhantering via NavigationPath. För projekt som stöder iOS 15 och äldre förblir NavigationView det enda alternativet.

NavigationLink och övergångar mellan skärmar

NavigationLink — ett SwiftUI-element som skapar en övergång till målgsskärmen inuti NavigationView eller NavigationStack. När NavigationLink trycks lägger systemet till målgsskärmen i navigationsstacken. Övergångsanimationen — standard push från höger för iOS, anpassas till plattformen.

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 tar två parametrar: destination — mål-View, och label — elementet som användaren klickar på. För listor är syntaxen med value och NavigationLink(value:) bekväm, som automatiskt avmarkerar cellen och fungerar med NavigationPath.

NavigationStack vs NavigationView: API-jämförelse

Från och med iOS 16 introducerade Apple NavigationStack som ersättning för NavigationView. NavigationStack behåller den deklarativa syntaxen men lägger till en kritisk funktion — programmatisk stackhantering via egenskapen path av typen NavigationPath eller en array av Hashable.

För projekt med minsta iOS 16+ version använd NavigationStack. För stöd av iOS 14-15 — NavigationView. NavigationStack har inga direkta motsvarigheter för gamla versioner, så uppgradering kräver kompatibilitetskontroll.

Toolbar och konfiguration av navigationTitle

Modifierarna .toolbar och .navigationTitle hanterar innehållet i navigeringsfältet. .navigationTitle ställer in skärmtiteln, .navigationBarTitleDisplayMode väljer stil: .large (stor, standard) eller .inline (kompakt, som i Inställningar). .toolbar lägger till knappar, sökning och segmenterad kontroll.

struct SettingsView: View {
    var body: some View {
        NavigationStack {
            Form {
                Section("Profil") {
                    Text("Användarnamn")
                    Toggle("Aviseringar", isOn: $notifications)
                }
            }
            .navigationTitle("Inställningar")
            .navigationBarTitleDisplayMode(.large)
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("Spara") { save() }
                }
                ToolbarItem(placement: .navigationBarLeading) {
                    EditButton()
                }
            }
        }
    }
}

.searchable — ytterligare en modifierare som integrerar sökfältet i navigation bar. Fungerar både med NavigationView och NavigationStack. Sökningen döljs automatiskt vid scrollning och visas vid svep nedåt. Stöder listfiltrering via Binding String.

Programmatisk navigering med NavigationPath

NavigationPath — en iOS 16+ typ som representerar navigationsstacken som en samling Hashable-värden. Utvecklaren lägger till element i path för programmatisk övergång, tar bort dem för återgång. NavigationPath stöder djupa länkar, push-aviseringar och återställning av tillstånd.

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

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

        // Programmatisk övergång via deep link
        .onOpenURL { url in
            guard let productId = DeepLinkParser.parse(url) else { return }
            path.append(Product(id: productId))
        }
    }
}

.navigationDestination(for:) registrerar datatypen för vilken en skärm ska visas. När ett värde av denna typ läggs till i path skapar systemet automatiskt mål-View. Detta tillvägagångssätt ersätter explicit NavigationLink(destination:) och gör navigeringen strikt typad.

NavigationView på iPad, watchOS och tvOS

NavigationView och NavigationStack fungerar på alla Apple-plattformar: iOS, iPadOS, watchOS, tvOS och macOS. Beteendet anpassar sig till skärmen. På iPad stöder NavigationStack NavigationSplitView, som ersätter UISplitViewController från UIKit och visar två kolumner på bred skärm.

NavigationSplitView (iOS 16+) delar skärmen i sidebar (lista) och detail (detaljer). På iPhone är sidebar dold och visar endast detail via NavigationLink. På iPad visas sidebar och detail samtidigt i split-läge.

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

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

NavigationSplitView väljer automatiskt det optimala visningsläget för varje enhet. På iPhone i porträttläge — stack, på iPad och iPhone i landskapsläge — split. Utvecklaren behöver inte skriva separat kod för olika size classer.