NavigationView: elementele de bază, stiva de navigare în aplicațiile SwiftUI

Ce este NavigationView?

NavigationView — un container SwiftUI care înfășoară o ierarhie de ecrane și oferă o interfață de navigare. În interiorul NavigationView funcționează NavigationLink — un element care, la apăsare, înlocuiește ecranul curent cu unul nou. NavigationView adaugă automat navigation bar cu titlu și butonul «Înapoi».

NavigationView a apărut în iOS 13 odată cu SwiftUI. Conceptual, înlocuiește UINavigationController din UIKit, dar este implementat declarativ. În loc de push/pop manual, dezvoltatorul descrie legătura dintre ecrane prin NavigationLink. Sistemul gestionează automat stiva.

NavigationView suportă modificatorii .navigationTitle, .navigationBarTitleDisplayMode, .toolbar și .searchable. Pentru iOS 16+, Apple a introdus NavigationStack, care păstrează API-ul NavigationView, dar adaugă gestionarea programatică a stivei prin NavigationPath. Pentru proiectele cu suport iOS 15 și mai vechi, NavigationView rămâne singura opțiune.

NavigationLink și tranzițiile între ecrane

NavigationLink — un element SwiftUI care creează o tranziție către ecranul țintă în interiorul NavigationView sau NavigationStack. La apăsarea NavigationLink, sistemul adaugă ecranul țintă în stiva de navigare. Animația tranziției — push standard din dreapta pentru iOS, se adaptează platformei.

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

struct DetailView: View {
    let item: Item

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

NavigationLink primește doi parametri: destination — View-ul țintă, și label — elementul pe care utilizatorul îl apasă. Pentru liste, este convenabilă sintaxa cu value și NavigationLink(value:), care deselectează automat celula și funcționează cu NavigationPath.

NavigationStack vs NavigationView: compararea API

Din iOS 16, Apple a prezentat NavigationStack ca înlocuitor pentru NavigationView. NavigationStack păstrează sintaxa declarativă, dar adaugă o capacitate critică — gestionarea programatică a stivei prin proprietatea path de tip NavigationPath sau un tablou Hashable.

Pentru proiecte cu versiunea minimă iOS 16+, utilizați NavigationStack. Pentru suport iOS 14-15 — NavigationView. NavigationStack nu are analogi direcți pentru versiunile vechi, deci upgrade-ul necesită verificarea compatibilității.

Toolbar și configurarea navigationTitle

Modificatorii .toolbar și .navigationTitle gestionează conținutul barei de navigare. .navigationTitle setează titlul ecranului, .navigationBarTitleDisplayMode alege stilul: .large (mare, implicit) sau .inline (compact, ca în Setări). .toolbar adaugă butoane, căutare și control segmentat.

struct SettingsView: View {
    var body: some View {
        NavigationStack {
            Form {
                Section("Profil") {
                    Text("Nume utilizator")
                    Toggle("Notificări", isOn: $notifications)
                }
            }
            .navigationTitle("Setări")
            .navigationBarTitleDisplayMode(.large)
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("Salvează") { save() }
                }
                ToolbarItem(placement: .navigationBarLeading) {
                    EditButton()
                }
            }
        }
    }
}

.searchable — un alt modificator care integrează bara de căutare în navigation bar. Funcționează atât cu NavigationView, cât și cu NavigationStack. Căutarea se ascunde automat la derulare și se afișează la glisarea în jos. Suportă filtrarea listei prin Binding String.

Navigare programatică cu NavigationPath

NavigationPath — un tip iOS 16+ care reprezintă stiva de navigare ca o colecție de valori Hashable. Dezvoltatorul adaugă elemente în path pentru tranziția programatică, le elimină pentru revenire. NavigationPath suportă linkuri profunde, notificări push și restaurarea stării.

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("Categorii")
            .navigationDestination(for: Category.self) { category in
                ProductListView(category: category)
            }
            .navigationDestination(for: Product.self) { product in
                ProductDetailView(product: product)
            }
        }

        // Tranziție programatică prin deep link
        .onOpenURL { url in
            guard let productId = DeepLinkParser.parse(url) else { return }
            path.append(Product(id: productId))
        }
    }
}

.navigationDestination(for:) înregistrează tipul de date pentru care trebuie afișat un ecran. Când o valoare de acest tip este adăugată în path, sistemul creează automat View-ul țintă. Această abordare înlocuiește NavigationLink(destination:) explicit și face navigarea strict tipizată.

NavigationView pe iPad, watchOS și tvOS

NavigationView și NavigationStack funcționează pe toate platformele Apple: iOS, iPadOS, watchOS, tvOS și macOS. Comportamentul se adaptează la ecran. Pe iPad, NavigationStack suportă NavigationSplitView, care înlocuiește UISplitViewController din UIKit și afișează două coloane pe ecranul lat.

NavigationSplitView (iOS 16+) împarte ecranul în sidebar (listă) și detail (detalii). Pe iPhone, sidebar-ul este ascuns, afișând doar detail prin NavigationLink. Pe iPad, sidebar și detail sunt afișate simultan în modul split.

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

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

NavigationSplitView alege automat modul optim de afișare pentru fiecare dispozitiv. Pe iPhone în modul portret — stivă, pe iPad și iPhone în landscape — split. Dezvoltatorul nu trebuie să scrie cod separat pentru diferite size class-uri.