NavigationView y NavigationLink en SWIFTUI en Español

NavigationView y NavigationLink son dos vistas en SwiftUI que se suelen usar de manera conjunta.
NavigationView nos sirve para presentar una pila de vistas siguiendo una jerarquía, es decir, es una de las maneras que tenemos de navegar dentro de nuestra app. Es el primer video en el que hablamos sobre navegación.
NavigationLink es como un Button que al ser pulsado navegamos al destino que especifiquemos. Este destino es una nueva vista como veremos a continuación.

NavigationView y NavigationLink en código

Para crear nuestro primer NavigationView, solo debemos encapsular el código que tengamos de la siguiente manera:

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                Text("Option Menu 1")
                Text("Option Menu 2")
                Text("Option Menu 3")
                Text("Option Menu 4")
            }
        }
    }
}

Al usar un NavigationView en nuestro código arriba del todo aparece un margen y parece que está vacío. Aquí podemos añadir un título usando el modificador navigationTitle vamos a darle un valor:

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                Text("Option Menu 1")
                Text("Option Menu 2")
                Text("Option Menu 3")
                Text("Option Menu 4")
            }
            .navigationTitle("Menu")
        }
    }
}

Fíjate que para darle el título al NavigationView no lo estamos haciendo al cerrar sus llaves, si no que lo estamos haciendo en este caso al cerrar las llaves de List. Esto es muy importante y lo veremos en otro vídeo.

Le hemos dado un título a nuestra vista y aparece en la barra de navegación. Si hacemos un poco de Scroll podemos ver el efecto que se generar.
También podemos aplicar distintos estilos en nuestra NavigationView, quizás ese margen tan amplio que aparece arriba es demasiado, pues podemos usar el siguiente modificador para cambiarlo:

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                Text("Option Menu 1")
                Text("Option Menu 2")
                Text("Option Menu 3")
                Text("Option Menu 4")
            }
            .navigationTitle("Menu")
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}

De esta manera, usando navigationBarTitleDisplayMode con la opción .inline aparece el modo clásico.

Otro modificador que podemos usar es el de ocultar la NavigationView, para hacerlo usamos el siguiente modificador:

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                Text("Option Menu 1")
                Text("Option Menu 2")
                Text("Option Menu 3")
                Text("Option Menu 4")
            }
            .navigationTitle("Menu")
            .navigationBarTitleDisplayMode(.inline)
            .navigationBarHidden(true)
        }
    }
}

Aunque la barra de navegación esté oculta no perdemos la funcionalidad de navegar dentro de la app. Pero por ahora dejaremos el valor de este modificador a false.

navigationBarItems

Otro detalle de la NavigationView es que podemos añadir vistas en los extremos de la barra de navegación:

• Para añadir botones a la izquierda, usaremos el modificador .navigationBarItems(leading:)
• Para añadir botones a la derecha, usaremos el modificador .navigationBarItems(trailing:)

Vamos a ver un ejemplo añadiendo un Button a la derecha de NavigationView:

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                Text("Option Menu 1")
                Text("Option Menu 2")
                Text("Option Menu 3")
                Text("Option Menu 4")
            }
            .navigationBarItems(trailing: Button("Done", action: {
                print("Right Button")
            }))
            .navigationTitle("Menu")
            .navigationBarTitleDisplayMode(.automatic)
            .navigationBarHidden(false)
        }
    }
}

Añadir un Button ya lo habíamos visto en otro vídeo y como acción hemos puesto que si se pulsa aparece el mensaje "Right Button" por consola. Añadir este tipo de botones es muy común dentro de las apps iOS.

NavigationLink

Ahora mismo solo tenemos el NavigationView, vamos a añadir un NavigationLink por cada elemento de List. Al hacerlo, el user podrá pulsar una de las opciones y navegará a una pantalla nueva.

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                NavigationLink("Option Menu 1",
                               destination: Text("Some information"))
                NavigationLink("Option Menu 2",
                               destination: Button("Tap me!", action: {
                        print("Hello iOS Developer!")})
                )
                
                Text("Option Menu 3")
                Text("Option Menu 4")
            }
            .navigationBarItems(trailing: Button("Done", action: {
                print("Right Buttton")
            }))
            .navigationTitle("Menu")
            .navigationBarTitleDisplayMode(.automatic)
            .navigationBarHidden(false)
        }
    }
}

He añadido dos NavigationLink en las dos primeras opciones de la List. En el primer caso hemos hecho que navegue a una vista donde en el centro de ella aparece "Some information".
Y en el segundo caso, hemos añadido un NavigationLink, que al pulsarlo navega a una vista donde aparece un Button y al pulsarlo aparece un mensaje por consola.

Cuando son pocas opciones, en este caso solo aparecen 4 se puede hacer de esta manera, pero si tuvieramos muchas más vistas dentro de nuestro List esto no escalaría, y sería conveniente usar un ForEarch. Reduciriamos la cantidad de líneas de código de nuestra app considerablemente.

Para diferenciar las opciones que tienen NavigationLink, si te fijas aparece un icono a la derecha >, esto significa que al pulsarlo navergaremos a otra vista.

Hasta aquí el post de hoy, gracias por leernos! 🤓
👉👉 SUSCRÍBETE al CANAL de youtube
Si tienes preguntas no dudes en contactar con nosotros a través de Twitter