Dans cette fiche :
À l'intérieur d'un NavigationStack, il est possible d'ajouter des vues de type NavigationLink.
Un NavigationLink est un lien qui mène à une autre vue ou, si vous préférez, à une autre page.
Dans sa plus simple expression, le lien de navigation affichera une page avec le texte spécifié.
Dans la page affichée par le lien, il y aura automatiquement un lien pour revenir à la page d'avant.
var body: some View {
NavigationStack {
VStack {
NavigationLink(destination: Text("Vous êtes à la page 1")) {
Text("Aller à la page 1")
}
.padding()
NavigationLink(destination: Text("Vous êtes à la page 2")) {
Text("Aller à la page 2")
}
.padding()
NavigationLink(destination: Text("Vous êtes à la page 3")) {
Text("Aller à la page 3")
}
.padding()
}
.navigationTitle("Mon application")
}
}
Notez bien que si vous ajoutez un NavigationLink en dehors d'un NavigationStack, il ne sera pas cliquable donc il sera inutile.
Lorsque le NavigationLink est utilisé à l'intérieur d'un List, l'apparence est standardisée.
var body: some View {
NavigationStack {
List {
NavigationLink(destination: Text("Vous êtes à la page 1")) {
Text("Aller à la page 1")
}
.padding()
NavigationLink(destination: Text("Vous êtes à la page 2")) {
Text("Aller à la page 2")
}
.padding()
NavigationLink(destination: Text("Vous êtes à la page 3")) {
Text("Aller à la page 3")
}
.padding()
}
.navigationTitle("Mon application")
.navigationBarTitleDisplayMode(.inline)
}
}
Toute la puissance du NavigationLink se produit quand il mène à une vue plus complexe plutôt qu'à un simple texte.
Il suffit de créer une vue SwiftUI dans un nouveau fichier, d'y définir ce qui doit y apparaître puis d'y faire référence dans le NavigationLink.
Notez que par convention, on placera toutes les vues dans un dossier nommé Views. Ce dossier sera placé à la racine de l'application, au même niveau que Assets.xcassets.
Cet extrait de code permet d'afficher une page d'ajout en cliquant sur une icône dans la barre de navigation.
NavigationStack {
VStack() {
...
}
.toolbar(content: {
ToolbarItem(placement: .navigationBarTrailing, content: {
NavigationLink(destination: AjouterItem()) {
Image(systemName: "plus.circle")
}
})
})
}
import SwiftUI
struct AjouterItem: View {
var body: some View {
// Remarquez qu'il ne faut pas ajouter un nouveau NavigationStack dans la vue
VStack {
...
}
.navigationTitle("Ajouter un item")
}
}
Le NavigationLink peut utiliser une syntaxe différente afin de centraliser l'appel de la vue enfant.
On lui passera en paramètre un value et c'est le .navigationDestination() qui se chargera de passer cette valeur à la vue enfant.
Ceci est souvent utilisé dans une liste d'instances quand on doit passer l'instance courante en paramètre à la vue enfant.
struct ContentView: View {
@Query(sort: \Categorie.titre) var categories: [Categorie]
var body: some View {
NavigationStack {
List (categories) { categorie in
NavigationLink(value: categorie) {
Text(categorie.titre)
}
}
.navigationDestination(for: Categorie.self) { categorie in
ListeItems(categorie: categorie)
}
.navigationTitle("Mon application")
}
}
}
Et dans la vue enfant, la catégorie sera reçue en paramètre.
struct ListeItems: View {
var categorie: Categorie
var body: some View {
if let items = categorie.items, !items.isEmpty {
ForEach(items.sorted(by: {$0.code < $1.code})) { item in
Text("\(item.code) - \(item.titre)")
}
}
else {
Text("Il n'y a aucun item dans la catégorie \(categorie.titre).")
}
}
}
« Better Navigation in SwiftUI with NavigationStack ». Swifty Place. https://www.swiftyplace.com/blog/better-navigation-in-swiftui-with-navigation-stack
▼Publicité
