19.11.2024

Aula 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

1. NavigationView: O NavigationView envolve o HomeView, permitindo a navegação.
2. NavigationLink: O NavigationLink é responsável por empurrar o DetailView para a pilha de navegação quando é pressionado.
3. 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

1. @State: Introduzimos uma variável @State em HomeView para armazenar a mensagem.
2. Passando Dados: Ao criar DetailView, passamos a mensagem de HomeView.

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!

Video

Navigation