NavigationView: basi, stack di navigazione nelle app SwiftUI

Cos'è NavigationView?

NavigationView è un contenitore SwiftUI che avvolge una gerarchia di schermate e fornisce un'interfaccia di navigazione. All'interno di NavigationView funziona NavigationLink — un elemento che, quando premuto, sostituisce la schermata corrente con una nuova. NavigationView aggiunge automaticamente una barra di navigazione con titolo e pulsante «Indietro».

NavigationView è apparso in iOS 13 insieme a SwiftUI. Concettualmente sostituisce UINavigationController di UIKit, ma è implementato in modo dichiarativo. Invece di push/pop manuale, lo sviluppatore descrive la relazione tra le schermate tramite NavigationLink. Il sistema gestisce automaticamente lo stack.

NavigationView supporta i modificatori .navigationTitle, .navigationBarTitleDisplayMode, .toolbar e .searchable. Per iOS 16+, Apple ha introdotto NavigationStack, che preserva l'API di NavigationView ma aggiunge la gestione programmatica dello stack tramite NavigationPath. Per i progetti con supporto fino a iOS 15, NavigationView rimane l'unica opzione.

NavigationLink e transizioni tra schermate

NavigationLink è un elemento SwiftUI che crea una transizione verso una schermata di destinazione all'interno di NavigationView o NavigationStack. Quando si preme NavigationLink, il sistema aggiunge la schermata di destinazione allo stack di navigazione. L'animazione di transizione è il push standard da destra su iOS, adattandosi alla piattaforma.

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

struct DetailView: View {
    let item: Item

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

NavigationLink accetta due parametri: destination — la View di destinazione, e label — l'elemento su cui l'utente preme. Per le liste, la sintassi con value e NavigationLink(value:) è conveniente — deseleziona automaticamente la cella e funziona con NavigationPath.

NavigationStack vs NavigationView: confronto API

Con iOS 16, Apple ha presentato NavigationStack come sostituto di NavigationView. NavigationStack preserva la sintassi dichiarativa ma aggiunge una funzionalità criticamente importante — la gestione programmatica dello stack tramite la proprietà path di tipo NavigationPath o un array di Hashable.

Per progetti con versione minima iOS 16+, usa NavigationStack. Per supporto iOS 14-15 — NavigationView. NavigationStack non ha analoghi diretti per le versioni precedenti, quindi l'aggiornamento richiede una verifica di compatibilità.

Toolbar e configurazione di navigationTitle

I modificatori .toolbar e .navigationTitle controllano il contenuto della barra di navigazione. .navigationTitle imposta il titolo della schermata, .navigationBarTitleDisplayMode seleziona lo stile: .large (grande, predefinito) o .inline (compatto, come in Impostazioni). .toolbar aggiunge pulsanti, ricerca e controllo segmentato.

struct SettingsView: View {
    var body: some View {
        NavigationStack {
            Form {
                Section("Profilo") {
                    Text("Nome utente")
                    Toggle("Notifiche", isOn: $notifications)
                }
            }
            .navigationTitle("Impostazioni")
            .navigationBarTitleDisplayMode(.large)
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("Salva") { save() }
                }
                ToolbarItem(placement: .navigationBarLeading) {
                    EditButton()
                }
            }
        }
    }
}

.searchable è un altro modificatore che integra una barra di ricerca nella barra di navigazione. Funziona sia con NavigationView che con NavigationStack. La ricerca si nasconde automaticamente durante lo scorrimento e appare scorrendo verso il basso. Supporta il filtraggio delle liste tramite un Binding String.

Navigazione programmatica con NavigationPath

NavigationPath è un tipo iOS 16+ che rappresenta uno stack di navigazione come una collezione di valori Hashable. Lo sviluppatore aggiunge elementi al path per transizioni programmatiche e li rimuove per tornare indietro. NavigationPath supporta deep link, notifiche push e ripristino dello stato.

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

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

        // Navigazione programmatica tramite deep link
        .onOpenURL { url in
            guard let productId = DeepLinkParser.parse(url) else { return }
            path.append(Product(id: productId))
        }
    }
}

.navigationDestination(for:) registra un tipo di dati per cui mostrare una schermata. Quando un valore di questo tipo viene aggiunto al path, il sistema crea automaticamente la View di destinazione. Questo approccio sostituisce il NavigationLink(destination:) esplicito e rende la navigazione strettamente tipizzata.

NavigationView su iPad, watchOS e tvOS

NavigationView e NavigationStack funzionano su tutte le piattaforme Apple: iOS, iPadOS, watchOS, tvOS e macOS. Il comportamento si adatta allo schermo. Su iPad, NavigationStack supporta NavigationSplitView, che sostituisce UISplitViewController di UIKit e mostra due colonne su schermo largo.

NavigationSplitView (iOS 16+) divide lo schermo in barra laterale (elenco) e dettaglio. Su iPhone, la barra laterale è nascosta, mostrando solo il dettaglio tramite NavigationLink. Su iPad, la barra laterale e il dettaglio vengono mostrati simultaneamente in modalità split.

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

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

NavigationSplitView seleziona automaticamente la modalità di visualizzazione ottimale per ogni dispositivo. Su iPhone in verticale — stack, su iPad e iPhone in orizzontale — split. Lo sviluppatore non deve scrivere codice separato per diverse classi di dimensione.