Barre d’outils et titre de navigation
Ajoutez des titres et des boutons de barre d’outils aux barres.
Barre d’outils et titre de navigation est une leçon SwiftUI Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage SwiftUI Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours SwiftUI Academy comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
Naming the Screen
Every screen deserves a clear name. The navigationTitle modifier puts a heading in the navigation bar so users always know where they are. 🧭
.navigationTitle("Inbox")Where the Title Goes
Attach navigationTitle to the content inside the NavigationStack, not to the stack itself. The bar then reads the title from the current screen.
NavigationStack {
List { }
.navigationTitle("Inbox")
}Large vs Inline
By default the title is large and shrinks as you scroll. Use navigationBarTitleDisplayMode to force a compact inline style instead.
.navigationBarTitleDisplayMode(.inline)Adding Toolbar Buttons
The toolbar modifier lets you place buttons in the navigation bar, like an add button or an edit action for the current screen.
.toolbar {
Button("Add") { addItem() }
}Choosing a Placement
Wrap each control in a ToolbarItem and pick a placement so buttons land on the correct side of the bar.
.toolbar {
ToolbarItem(placement: .topBarTrailing) {
Button("Add") { }
}
}Leading and Trailing
Use topBarLeading for the left edge and topBarTrailing for the right. These adapt automatically for right-to-left languages. 🌍
Icons in the Bar
Toolbar buttons often use SF Symbols instead of words to stay compact. A small image keeps the bar tidy on every device.
Button {
addItem()
} label: {
Image(systemName: "plus")
}Many Buttons at Once
You can add several ToolbarItem entries in one toolbar block, grouping related actions like edit, share, and add together.
The Bottom Toolbar
Placement is not limited to the top. Use bottomBar to pin actions to the bottom of the screen for thumb-friendly controls.
ToolbarItem(placement: .bottomBar) {
Button("Done") { }
}Titles Follow the Stack
Each pushed screen sets its own title, and the bar updates as you navigate. The previous title even becomes the back button label.
Keep Bars Uncluttered
Resist filling the bar with buttons. Two or three clear actions keep the screen calm and easy to scan.
Quick Check
Which modifier adds buttons to the navigation bar?
Recap: Toolbar & Title
You name screens with navigationTitle and add buttons with toolbar and ToolbarItem placements. Up next, driving navigation entirely from code. 🚀
Questions Fréquemment Posées
La leçon « Barre d’outils et titre de navigation » est-elle gratuite ?
Oui — le texte complet de « Barre d’outils et titre de navigation » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours SwiftUI Academy, passe à CoddyKit PRO. Le cours SwiftUI Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Barre d’outils et titre de navigation » ?
Ajoutez des titres et des boutons de barre d’outils aux barres. Tu pratiques SwiftUI Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer SwiftUI Academy ?
Aucune expérience préalable n'est requise. SwiftUI Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Barre d’outils et titre de navigation » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon SwiftUI Academy ?
Oui. Chaque leçon SwiftUI Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Accéder à des écrans avec NavigationLink
- Transmettre des données aux vues détaillées
- Barre d’outils et titre de navigation
- Chemins de navigation programmatiques