Il est intéressant d'ajouter un titre dans la bare de navigation, dans le haut de la fenêtre d'une application mobile. Cette barre peut contenir le titre de l'application et possiblement des icônes ou du texte qui donnent accès à des fonctionnalités de votre choix.
Dans cette fiche :
Avec SwiftUI, il est possible d'ajouter un titre en englobant le contenu de la vue dans un NavigationStack, qui est disponible depuis iOS 16.
Dans sa forme la plus simple, le titre de l'application sera fourni à l'aide de la méthode navigationTitle().
Notez que la vue NavigationView et sa méthode navigationBarTitle() sont obsolètes.
Voici donc comment définir le titre de l'application à l'aide de NavigationStack et navigationTitle().
struct ContentView: View {
var body: some View {
NavigationStack {
Text("Hello, world!")
.navigationTitle("Le titre")
}
}
}
Dans les faits, une vue est rarement composée d'un seul élément.
Tout le contenu de la vue doit être à l'intérieur du NavigationStack.
On retrouvera généralement quelque chose du genre :
struct ContentView: View {
var body: some View {
NavigationStack {
VStack {
Text("Hello, world!")
// ...
}
.navigationTitle("Le titre")
}
}
}
Si vous préférez un titre plus petit et centré, il est possible d'ajuster le code comme ceci :
struct ContentView: View {
var body: some View {
NavigationStack {
VStack {
Text("Hello, world!")
// ...
}
.navigationTitle("Le titre")
.navigationBarTitleDisplayMode(.inline)
}
}
}
Visuellement, on obtiendra le même résultat en définissant un ToolbarItem avec l'emplacement .principal.
struct ContentView: View {
var body: some View {
NavigationStack {
VStack {
Text("Hello, world!")
// ...
}
.toolbar(content: {
ToolbarItem(placement: .principal, content: {
Text("Le titre")
})
})
}
}
}
Il est important de placer le titre de l'application après le contrôle d'empilement principal, à l'intérieur du NavigationStack.
struct ContentView: View {
var body: some View {
NavigationStack {
VStack {
Text("Hello, world!")
// ...
}
.navigationTitle("Le titre")
} // fin NavigationStack
}
}
Notez que la vue principale devra être entièrement incluse dans le NavigationStack. Ceci ne fonctionnera pas :
struct ContentView: View {
var body: some View {
NavigationStack {
Text("Hello, world!")
.navigationTitle("Le titre")
}
}
}
« Working with Toolbar in SwiftUI ». AppCoda. https://www.appcoda.com/swiftui-toolbar/
▼Publicité
