Barra de ferramentas e título de navegação
Adicione títulos e botões da barra de ferramentas às barras.
Barra de ferramentas e título de navegação é uma aula grátis de SwiftUI Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de SwiftUI Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de SwiftUI Academy inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
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. 🚀
Perguntas Frequentes
A aula “Barra de ferramentas e título de navegação” é grátis?
Sim — o texto completo de “Barra de ferramentas e título de navegação” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de SwiftUI Academy, atualize para CoddyKit PRO. O curso de SwiftUI Academy inclui 4 aulas no total.
O que vou aprender em “Barra de ferramentas e título de navegação”?
Adicione títulos e botões da barra de ferramentas às barras. Você pratica SwiftUI Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar SwiftUI Academy?
Nenhuma experiência prévia é necessária. SwiftUI Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Barra de ferramentas e título de navegação”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de SwiftUI Academy?
Sim. Cada aula de SwiftUI Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Abrindo telas com NavigationLink
- Passando dados para visualizações de detalhes
- Barra de ferramentas e título de navegação
- Caminhos de navegação programática