NavigationView : bases, pile de navigation dans les apps SwiftUI

Qu'est-ce que NavigationView ?

NavigationView est un conteneur SwiftUI qui encapsule une hiérarchie d'écrans et fournit une interface de navigation. À l'intérieur de NavigationView fonctionne NavigationLink — un élément qui, lorsqu'on appuie dessus, remplace l'écran actuel par un nouveau. NavigationView ajoute automatiquement une barre de navigation avec un titre et un bouton « Retour ».

NavigationView est apparu avec iOS 13 en même temps que SwiftUI. Conceptuellement, il remplace UINavigationController d'UIKit, mais est implémenté de manière déclarative. Au lieu d'un push/pop manuel, le développeur décrit la relation entre les écrans via NavigationLink. Le système gère automatiquement la pile.

NavigationView prend en charge les modificateurs .navigationTitle, .navigationBarTitleDisplayMode, .toolbar et .searchable. Pour iOS 16+, Apple a introduit NavigationStack, qui préserve l'API de NavigationView mais ajoute une gestion programmatique de la pile via NavigationPath. Pour les projets prenant en charge iOS 15 et inférieur, NavigationView reste la seule option.

NavigationLink et transitions entre écrans

NavigationLink est un élément SwiftUI qui crée une transition vers un écran cible dans NavigationView ou NavigationStack. Lorsqu'on appuie sur NavigationLink, le système ajoute l'écran cible à la pile de navigation. L'animation de transition est le push standard depuis la droite sur iOS, s'adaptant à la plateforme.

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

struct DetailView: View {
    let item: Item

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

NavigationLink accepte deux paramètres : destination — la View cible, et label — l'élément sur lequel l'utilisateur appuie. Pour les listes, la syntaxe avec value et NavigationLink(value:) est pratique — elle désélectionne automatiquement la cellule et fonctionne avec NavigationPath.

NavigationStack vs NavigationView : comparaison d'API

Avec iOS 16, Apple a présenté NavigationStack comme remplacement de NavigationView. NavigationStack préserve la syntaxe déclarative mais ajoute une fonctionnalité cruciale — la gestion programmatique de la pile via la propriété path de type NavigationPath ou d'un tableau de Hashable.

Pour les projets avec une version minimale iOS 16+, utilisez NavigationStack. Pour le support iOS 14-15 — NavigationView. NavigationStack n'a pas d'analogues directs pour les anciennes versions, donc la mise à niveau nécessite une vérification de compatibilité.

Toolbar et configuration de navigationTitle

Les modificateurs .toolbar et .navigationTitle contrôlent le contenu de la barre de navigation. .navigationTitle définit le titre de l'écran, .navigationBarTitleDisplayMode sélectionne le style : .large (grand, par défaut) ou .inline (compact, comme dans Réglages). .toolbar ajoute des boutons, la recherche et un contrôle segmenté.

struct SettingsView: View {
    var body: some View {
        NavigationStack {
            Form {
                Section("Profil") {
                    Text("Nom d'utilisateur")
                    Toggle("Notifications", isOn: $notifications)
                }
            }
            .navigationTitle("Réglages")
            .navigationBarTitleDisplayMode(.large)
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("Enregistrer") { save() }
                }
                ToolbarItem(placement: .navigationBarLeading) {
                    EditButton()
                }
            }
        }
    }
}

.searchable est un autre modificateur qui intègre une barre de recherche dans la barre de navigation. Fonctionne aussi bien avec NavigationView qu'avec NavigationStack. La recherche se cache automatiquement au défilement et apparaît en balayant vers le bas. Prend en charge le filtrage de listes via un Binding String.

Navigation programmatique avec NavigationPath

NavigationPath est un type iOS 16+ qui représente une pile de navigation comme une collection de valeurs Hashable. Le développeur ajoute des éléments au path pour les transitions programmatiques et les supprime pour revenir en arrière. NavigationPath prend en charge les deep links, les notifications push et la restauration d'état.

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

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

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

.navigationDestination(for:) enregistre un type de données pour lequel afficher un écran. Lorsqu'une valeur de ce type est ajoutée au path, le système crée automatiquement la View cible. Cette approche remplace le NavigationLink(destination:) explicite et rend la navigation strictement typée.

NavigationView sur iPad, watchOS et tvOS

NavigationView et NavigationStack fonctionnent sur toutes les plateformes Apple : iOS, iPadOS, watchOS, tvOS et macOS. Le comportement s'adapte à l'écran. Sur iPad, NavigationStack prend en charge NavigationSplitView, qui remplace UISplitViewController d'UIKit et affiche deux colonnes sur un écran large.

NavigationSplitView (iOS 16+) divise l'écran en barre latérale (liste) et détail. Sur iPhone, la barre latérale est masquée, affichant uniquement le détail via NavigationLink. Sur iPad, la barre latérale et le détail sont affichés simultanément en mode split.

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

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

NavigationSplitView sélectionne automatiquement le mode d'affichage optimal pour chaque appareil. Sur iPhone en portrait — pile, sur iPad et iPhone en paysage — split. Le développeur n'a pas besoin d'écrire de code séparé pour différentes classes de taille.