Podemos facer que a nosa aplicacións navegable, é dicir, se mova entre diferentes vistas:

• Temos que incrustar toda a vista onde teremos os elementos navegable dentro dunha vista de navegación NavigationView.
• Os elementos navegables deben estar dentro dun NavigationLink que configura a que vista vamos a navegar ou a ir cando o usuario toque no elemento navegable.

Así, por exemplo:

import SwiftUI

struct ProbaView: View {
    var body: some View {
        NavigationView {
            NavigationLink {
                Text("Vista que abrimos ao pulsar")
            } label: {
                Text("Toca para ir ao texto")
            }
        }
    }
}

Exemplo de NavigationView cunha List #

No seguinte exemplo, imos a facer que os elementos dunha lista List sexan navegables. Lembrade que isto se pode facer con calquera View:

• Temos que incrustar toda a lista List dentro dunha vista de navegación NavigationView.
• As filas da lista List deben estar dentro dun NavigationLink que configura a que vista vamos cando o usuario cando toque a fila.

A maiores, nun NavigationView podemos configurar:

• O título da barra de navegación mediante o modificador .navigationBarTitle(vista).
• Engadir botón na parte superior da barra de navegación mediante o modificador:

.navigationBarItems(trailing: Button(action: accion_que_se_executa_ao_pulsar){
                Text("Texto do botón")
            })

Vemos o seguinte exemplo:

import SwiftUI

struct ListaTarefas: Identifiable {
    var id = UUID()
    var tarefa: String
    var nomeImaxe: String
}

private func engadirTarefa() {
    //
}

struct ContentView: View {
    @State var lista: [ListaTarefas] = [
    ListaTarefas(tarefa: "Tirar o lixo", nomeImaxe: "trash.circle.fill"),
    ListaTarefas(tarefa: "Recoller aos nenos", nomeImaxe: "person.2.fill"),
    ListaTarefas(tarefa: "Lavar o coche", nomeImaxe: "car.fill")
    ]
    
    @State private var estadoBoton = true
    
    var body: some View {
        NavigationView {
            List {
                Section(header: Text("Axustes")){
                    Toggle(isOn: $estadoBoton) {
                        Text("Permitir notificacións")
                    }
                }
        
                Section(header: Text("Tarefas"), footer: Text("Non te esquezas de nada 🧐")){
                    ForEach(lista) { tarefa in
                        NavigationLink(destination: Text(tarefa.tarefa)){
                            HStack {
                                Image(systemName: tarefa.nomeImaxe)
                                Text(tarefa.tarefa)
                            }
                        }
                    }
                }
            }
            .navigationBarTitle(Text("Lista de tarefas"))
            .navigationBarItems(trailing: Button(action: engadirTarefa){
                Text("Engadir tarefa")
                
            })
        }
    }
}

Borrar un elemento #

É común que unha aplicación permita ao usuario eliminar elementos dunha lista e, nalgúns casos, mesmo mover un elemento dunha posición a outra.

• A eliminación pódese habilitar engadindo un modificador onDelete() a cada celda da lista, especificando un método que eliminará o elemento.
• Cando se chama a este método, pasaráselle un obxecto IndexSet que contén os desprazamentos das filas que se eliminan

import SwiftUI

struct ListaTarefas: Identifiable {
    var id = UUID()
    var tarefa: String
    var nomeImaxe: String
}



struct ContentView: View {
    @State var lista: [ListaTarefas] = [
    ListaTarefas(tarefa: "Tirar o lixo", nomeImaxe: "trash.circle.fill"),
    ListaTarefas(tarefa: "Recoller aos nenos", nomeImaxe: "person.2.fill"),
    ListaTarefas(tarefa: "Lavar o coche", nomeImaxe: "car.fill")
    ]
    
    @State private var estadoBoton = true
    
    var body: some View {
        NavigationView {
            List {
                Section(header: Text("Axustes")){
                    Toggle(isOn: $estadoBoton) {
                        Text("Permitir notificacións")
                    }
                }
        
                Section(header: Text("Tarefas"), footer: Text("Non te esquezas de nada 🧐")){
                    ForEach(lista) { tarefa in
                        NavigationLink(destination: Text(tarefa.tarefa)){
                            HStack {
                                Image(systemName: tarefa.nomeImaxe)
                                Text(tarefa.tarefa)
                            }
                        }
                    }
                    .onDelete(perform: borrarTarefa)
                }
            }
            .navigationBarTitle(Text("Lista de tarefas"))
            .navigationBarItems(trailing: Button(action: engadirTarefa){
                Text("Engadir tarefa")
                
            })
        }
    }
    func engadirTarefa() {
        //
    }
    func borrarTarefa(at offsets:IndexSet) {
        //Borrar elementos
    }
}

Mover elemento #

Podemos permitir ao usuario mover elementos cara arriba e cara abaixo nunha lista:

• Empregamos o modificador onMove() a cada celda da lista, especificando o método que moverá o elemento.
• Cando se chama a este método, pasaráselle un obxecto IndexSet que contén as posicións das filas que se moven e un enteiro que indica a posición destino
• Temos tamén que engadir unha instancia de EditButton á lista. Cando se pulsa, este botón cambia a lista ao modo editable e permite que o usuario mova e elimine os elementos. Este botón de edición engádese como un elemento da barra de navegación co modificador navigationBarltems()

import SwiftUI

struct ListaTarefas: Identifiable {
    var id = UUID()
    var tarefa: String
    var nomeImaxe: String
}



struct ContentView: View {
    @State var lista: [ListaTarefas] = [
    ListaTarefas(tarefa: "Tirar o lixo", nomeImaxe: "trash.circle.fill"),
    ListaTarefas(tarefa: "Recoller aos nenos", nomeImaxe: "person.2.fill"),
    ListaTarefas(tarefa: "Lavar o coche", nomeImaxe: "car.fill")
    ]
    
    @State private var estadoBoton = true
    
    var body: some View {
        NavigationView {
            List {
                Section(header: Text("Axustes")){
                    Toggle(isOn: $estadoBoton) {
                        Text("Permitir notificacións")
                    }
                }
        
                Section(header: Text("Tarefas"), footer: Text("Non te esquezas de nada 🧐")){
                    ForEach(lista) { tarefa in
                        NavigationLink(destination: Text(tarefa.tarefa)){
                            HStack {
                                Image(systemName: tarefa.nomeImaxe)
                                Text(tarefa.tarefa)
                            }
                        }
                    }
                    .onDelete(perform: borrarTarefa)
                    .onMove(perform: moverTarefa)
                }
            }
            .navigationBarTitle(Text("Lista de tarefas"))
            .navigationBarItems(trailing: Button(action: engadirTarefa){
                Text("Engadir tarefa")
            })
            .navigationBarItems(trailing: EditButton())
        }
    }
    func engadirTarefa() {
        //
    }
    func borrarTarefa(at offsets:IndexSet) {
        //Borrar elementos
    }
    func moverTarefa(at offsets:IndexSet, to destination: Int) {
        //Mover elementos
    }
}

Follas modais #

O modificador .sheet dos NavigationView utilízanse para amosar follas modais:

No seguinte exemplo, cando se preme no Toggle «Amosar folla modal», establécese a variable de estado ‌amosarFollaModal en true, o que fai que se presente a folla modal grazas ao modificador .sheet:

import SwiftUI

struct ProbaView: View {
    
    @State var amosarFollaModal = false
    
    var body: some View {
        Toggle("Amosar folla modal", isOn: $amosarFollaModal).padding()
        NavigationView {
            NavigationLink {
                Text("Vista que abrimos ao pulsar")
            } label: {
                Text("Toca para ir ao texto")
            }
        }.padding()
        .sheet(isPresented: $amosarFollaModal, content: {
            Text("Folla Aberta")
            Toggle("Pechar a folla modal", isOn: $amosarFollaModal).padding()
        })
    }
}

Outro exemplo de folla modal: #

Aquí podemos ver outro exemplo:

import SwiftUI

struct ProbaView: View {
    
   @State private var showModal = false

   var body: some View {
       NavigationView {
           VStack {
               Button("Amosar modal") {
                   showModal = true
               }
           }
           .sheet(isPresented: $showModal) {
               VStack {
                   Text("Folla Modal")
                   Button("Pechar folla modal") {
                       showModal = false
                   }
               }
               
           }
       }
   }
}