Fiche 05.01

Fiche 05.01 — NavigationStack, NavigationLink et écran détail

Objectif

Savoir créer une navigation classique SwiftUI : une liste, un élément cliquable, un écran détail, un titre et une toolbar.

1. L’idée à comprendre

Depuis iOS 16, la navigation SwiftUI moderne repose sur NavigationStack. Elle remplace l’ancien NavigationView pour la plupart des nouveaux projets.

Structure classique :

Swift

NavigationStack {
    List(items) { item in
        NavigationLink {
            DetailView(item: item)
        } label: {
            RowView(item: item)
        }
    }
    .navigationTitle("Titre")
}

2. Exemple liste vers détail

Swift

import SwiftUI

struct Article: Identifiable {
    let id = UUID()
    let title: String
    let subtitle: String
    let content: String
}

struct ArticleListView: View {
    private let articles = [
        Article(title: "SwiftUI", subtitle: "Interface déclarative", content: "SwiftUI permet de décrire l’interface en fonction de l’état."),
        Article(title: "MVVM", subtitle: "Architecture", content: "MVVM sépare la vue, l’état et la logique."),
        Article(title: "Firebase", subtitle: "Backend", content: "Firebase permet d’ajouter auth, database, storage et notifications.")
    ]

    var body: some View {
        NavigationStack {
            List(articles) { article in
                NavigationLink {
                    ArticleDetailView(article: article)
                } label: {
                    VStack(alignment: .leading, spacing: 4) {
                        Text(article.title)
                            .font(.headline)

                        Text(article.subtitle)
                            .font(.caption)
                            .foregroundStyle(.secondary)
                    }
                }
            }
            .navigationTitle("Articles")
        }
    }
}

struct ArticleDetailView: View {
    let article: Article

    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 16) {
                Text(article.title)
                    .font(.largeTitle.bold())

                Text(article.subtitle)
                    .foregroundStyle(.secondary)

                Text(article.content)
                    .font(.body)
            }
            .padding()
        }
        .navigationTitle(article.title)
        .navigationBarTitleDisplayMode(.inline)
    }
}

NavigationLink crée automatiquement le lien entre la cellule et l’écran détail.

3. Passer des données à l’écran détail

Le plus simple est de passer l’objet directement :

Swift

ArticleDetailView(article: article)

C’est très courant pour une liste locale ou déjà chargée.

Dans une app plus avancée, tu peux passer seulement un identifiant :

Swift

ArticleDetailView(articleId: article.id)

Puis l’écran détail recharge les données depuis un service ou un ViewModel.

4. Toolbar simple

Swift

struct ToolbarExampleView: View {
    var body: some View {
        NavigationStack {
            Text("Contenu")
                .navigationTitle("Accueil")
                .toolbar {
                    ToolbarItem(placement: .topBarTrailing) {
                        Button {
                            print("Ajouter")
                        } label: {
                            Image(systemName: "plus")
                        }
                    }
                }
        }
    }
}

La toolbar sert souvent à ajouter un bouton “plus”, “modifier”, “réglages” ou “profil”.

5. Navigation et MVVM

La vue peut gérer une navigation simple avec NavigationLink. Pour une navigation déclenchée après une action, par exemple après connexion, on utilisera plutôt une navigation programmatique avec une route ou un état.

Exemple simple :

Swift

Button("Se connecter") {
    // appel login puis navigation dans la fiche suivante
}

Points à connaître

NavigationStack doit généralement entourer une grande zone de navigation, pas chaque petite cellule.

NavigationLink est idéal pour les listes vers détail.

Pour une app avec onglets, on met souvent une NavigationStack par onglet.

Résumé

NavigationStack est la base de la navigation SwiftUI moderne.
NavigationLink permet d’aller vers un écran détail.
On peut passer un objet ou un identifiant à la vue détail.
.navigationTitle définit le titre de l’écran.
.toolbar ajoute des actions dans la barre de navigation.