Dans cette fiche :
Il est possible d'ajouter du texte ou des icônes dans la barre de navigation (navigation bar) située dans le haut complètement de l'application. Cette barre est aussi appelée barre d'outils (toolbar). Sur macOS, elle s'appelle barre de titre (title bar).
Une seconde barre d'outils est disponible dans le bas de l'écran.
C'est la structure ToolbarItem qui permet de définir le contenu des barres d'outils.
Pour chaque ajout, on précisera la position à l'aide d'une de ces valeurs.
Emplacements sémantiques :
Emplacements selon le type d'action :
Emplacements avec une position explicite :
L'emplacement exact dépendra des options utilisées puisque certains se placent par exemple au centre par défaut mais se déplacent à gauche lorsqu'une autre option est centrée.
struct ContentView: View {
var body: some View {
NavigationStack {
// contenu de la vue
// ...
.toolbar(content: {
ToolbarItem(placement: .principal, content: {
Text("Le titre")
})
ToolbarItem(placement: .topBarLeading, content: {
//...
})
ToolbarItem(placement: .topBarTrailing, content: {
//...
})
ToolbarItem(placement: .bottomBar, content: {
//...
})
ToolbarItem(placement: .status, content: {
//...
})
ToolbarItem(placement: .bottomBar, content: {
//...
})
}) // fin .toolbar
} // fin NavigationStack
} // fin body
} // fin ContentView
Afin de rendre le tout plus lisible, il est possible de placer le code des barres d'outils dans son propre fichier.
Le nom de la structure doit respecter LaCassePascal.
Le code sera placé dans un fichier qui porte le même nom que la structure, dans un dossier nommé Views.
struct ToolbarPrincipal: ToolbarContent {
... // on pourrait ici déclarer des propriétés requises pour la barre d'outils
var body: some ToolbarContent {
ToolbarItem(placement: .principal, content: {
Text("Le titre")
})
ToolbarItem(placement: .topBarLeading, content: {
//...
})
ToolbarItem(placement: .topBarTrailing, content: {
//...
})
ToolbarItem(placement: .bottomBar, content: {
//...
})
ToolbarItem(placement: .status, content: {
//...
})
ToolbarItem(placement: .bottomBar, content: {
//...
})
}
}
Chaque vue pourra utiliser les barres d'outils ainsi codées et, si désiré, ajouter leurs propres barres d'outils.
NavigationStack {
// contenu de la vue
//...
.toolbar {
// texte ou icône propre à cette vue (si requis)
ToolbarItem(... {
//...
})
// textes ou icônes communs à plusieurs vues
ToolbarPrincipal()
}
}
« Navigation bar swiftui ». Eon's swift blog. https://eon.codes/blog/2023/11/18/navigation-bar-swiftui/
▼Publicité
