Navigation en SwiftUI

Comprendre la Navigation

La navigation consiste à passer d'une vue à une autre à partir de la vue racine d'une application. Dans SwiftUI, le composant NavigationStack est utilisé pour permettre à la vue racine d'afficher des vues superposées.

Utilisation de NavigationStack

Pour naviguer vers différentes vues depuis la vue racine, il faut envelopper les vues avec une structure NavigationStack, comme illustré dans l'exemple ci-dessous :

struct MyApp: View {
   var body: some View {
       NavigationStack {
           Text("Bonjour, le monde !")
       }
   }
}

Cela définit la vue racine de la pile. Pour spécifier la vue de destination, on utilise NavigationLink. Lorsque l'utilisateur interagit avec le lien, il se dirige vers la vue cible définie :

NavigationStack {
   VStack {
       Text("Bonjour, le monde !")
       NavigationLink {
           Text("Le Caire") // Destination souhaitée
       } label: {
           Text("Aller à...")
       }
   }
}

Ce code va afficher un texte avec un lien qui permet d'accéder à une autre vue.

On peut également personnaliser le label de NavigationLink :

NavigationStack {
   VStack {
       Text("Bonjour, le monde !")
       NavigationLink {
           Text("Le Caire") // Destination souhaitée
       } label: {
           Image(systemName: "arrow.right")
               .foregroundColor(.red)
               .padding(.vertical)
       }
   }
}

Sous iOS 15 ou une version antérieure, NavigationStack n'est pas disponible, il faut donc utiliser NavigationView à la place. Dans les exemples précédents, remplacez simplement NavigationStack par NavigationView.

NavigationStack avec des Listes

L'un des usages courants de NavigationStack est avec des listes. Par exemple, si on a une liste de noms, on peut naviguer vers une autre vue en appuyant sur un élément de cette liste. Cela se fait en englobant la liste dans un NavigationStack :

struct MyApp: View {
   let names = ["Omar", "Adam", "Zack"] // Liste de noms
   var body: some View {
       NavigationStack {
           List(names, id: \.self) { name in // La liste itère sur le tableau des noms
               NavigationLink {
                   Text(name) // Destination souhaitée
               } label: {
                   Text(name)
               }
           }
       }
   }
}

Avec ce code, chaque nom dans la liste sera cliquable et naviguera vers une vue affichant le nom.

Modificateurs de NavigationStack

On peut appliquer certains modificateurs de base à NavigationStack. Le premier est .navigationTitle qui permet de définir le titre de la vue :

struct MyApp: View {
   let names = ["Omar", "Adam", "Zack"]
   var body: some View {
       NavigationStack {
           List(names, id: \.self) { name in
               NavigationLink {
                   Text(name) // Destination souhaitée
               } label: {
                   Text(name)
               }
           }
           .navigationTitle("Noms")
       }
   }
}

Pour cacher le bouton "retour" qui apparaît lors de la navigation, utilisez .navigationBarBackButtonHidden() :

NavigationStack {
   List(names, id: \.self) { name in
       NavigationLink {
           Text(name)
               .navigationBarBackButtonHidden()
       } label: {
           Text(name)
       }
   }
   .navigationTitle("Noms")
}

Ces exemples sont basiques, il n'y a pas de limite à l'utilisation de NavigationStack.