Lição: 77: Navegação e NavigationView em SwiftUI
Nesta aula, vamos explorar como navegar entre diferentes visualizações em suas aplicações SwiftUI usando NavigationView
e NavigationLink
. A navegação é uma parte essencial da construção de interfaces de usuário intuitivas, e estas ferramentas ajudarão você a criar transições suaves e organizar melhor seu conteúdo dentro do aplicativo.
O que é NavigationView
?
NavigationView
é uma visualização contêiner que permite a navegação entre visualizações filhas em uma aplicação SwiftUI. Ela se aproveita de um modelo de navegação baseado em pilha, semelhante ao utilizado no UIKit. Quando você empurra uma visualização para a pilha de navegação, a visualização atual desliza para fora, e a nova visualização desliza para dentro.
Criando uma Navegação Básica
Vamos começar criando uma estrutura de navegação simples. Neste exemplo, criaremos duas visualizações: HomeView
e DetailView
. Navegaremos de HomeView
para DetailView
quando um botão for pressionado.
Passo 1: Criar as Visualizações
Primeiro, crie o ContentView
principal com um NavigationView
:
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationView {
HomeView()
}
}
}
struct HomeView: View {
var body: some View {
VStack {
Text("Bem-vindo à Tela Inicial")
.font(.largeTitle)
.padding()
NavigationLink(destination: DetailView()) {
Text("Ir para a Tela de Detalhes")
.font(.headline)
.padding()
.background(Color.blue.opacity(0.7))
.foregroundColor(.white)
.cornerRadius(10)
}
}
.navigationTitle("Início")
}
}
struct DetailView: View {
var body: some View {
VStack {
Text("Esta é a Tela de Detalhes")
.font(.largeTitle)
.padding()
}
.navigationTitle("Detalhes")
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Explicação
- NavigationView: O
NavigationView
envolve oHomeView
, permitindo a navegação. - NavigationLink: O
NavigationLink
é responsável por empurrar oDetailView
para a pilha de navegação quando é pressionado. - navigationTitle: Este modificador define o título exibido na barra de navegação para cada visualização.
Adicionando Funcionalidade de Voltar
Quando você navega para uma nova visualização usando NavigationLink
, o SwiftUI fornece um botão de navegação para voltar automaticamente na barra de navegação. Este botão retira automaticamente a visualização da pilha quando pressionado.
Personalizando o Botão de Voltar
Se você quiser personalizar o botão de voltar ou ocultar o título da navegação, pode usar a seguinte abordagem:
struct DetailView: View {
var body: some View {
VStack {
Text("Esta é a Tela de Detalhes")
.font(.largeTitle)
.padding()
}
.navigationTitle("Detalhes")
.navigationBarBackButtonHidden(false) // Oculte o botão de voltar, se desejar
}
}
Passando Dados Entre Visualizações
Você também pode passar dados entre visualizações usando @State
ou @Binding
. Vamos modificar nossas visualizações para demonstrar a passagem de uma string de HomeView
para DetailView
:
struct HomeView: View {
@State private var message: String = "Olá da Tela Inicial"
var body: some View {
VStack {
Text("Bem-vindo à Tela Inicial")
.font(.largeTitle)
.padding()
NavigationLink(destination: DetailView(message: message)) {
Text("Ir para a Tela de Detalhes")
.font(.headline)
.padding()
.background(Color.blue.opacity(0.7))
.foregroundColor(.white)
.cornerRadius(10)
}
}
.navigationTitle("Início")
}
}
struct DetailView: View {
var message: String
var body: some View {
VStack {
Text(message)
.font(.largeTitle)
.padding()
}
.navigationTitle("Detalhes")
}
}
Explicação
- @State: Introduzimos uma variável
@State
emHomeView
para armazenar a mensagem. - Passando Dados: Ao criar
DetailView
, passamos a mensagem deHomeView
.
Conclusão
Nesta aula, aprendemos como configurar uma navegação básica usando NavigationView
e NavigationLink
em uma aplicação SwiftUI. Também exploramos como personalizar a barra de navegação e passar dados entre visualizações.
Ao continuar construindo suas aplicações SwiftUI, continue experimentando com diversos padrões de navegação para criar interfaces intuitivas e amigáveis! Boa codificação!