NavigationView, NavigationLink e introducción a múltiples pantallas

Clase 20 de 22 • Curso de SwiftUI desde Cero (2021)

Fernando Molano Castrillón

student•

Si se están preguntando cómo va ser cuando tengan que crear múltiples links, por ejemplo un link por cada item en una lista, no se preocupen que con los forEach esto se automatiza y limpia el código, además de crear rutas y contenido personalizados.

Daniela Lara

student•

Muchas gracias por tu aporte :D

Gino Alejandro Limo Garcia

student•

A partir de iOS 16 se usa NavigationStack, me costó entenderlo, pero logré adaptar este ejemplo con la nueva versión, así que ya no sería necesario usar el @State var ni tampoco el botón.

struct NavigationsView: View {
    var body: some View {
        NavigationStack{
            VStack {
                Text("Hello, World!")
                    .navigationTitle("Home ")
                    .navigationBarTitleDisplayMode(/**/.inline/**/)
                    .toolbar {
                        ToolbarItem(placement: .navigationBarTrailing) {
                            
                            NavigationLink("+", destination: DividersView())
                            
                        }
                    }
                
                NavigationLink("Navegar a vista de ImagesView") {
                    ImagesView()
                }
            }
        }
    }
}

Andrés Rivera Galo

student•

Gracias Gino

Nicolas Hernandez Chaustre

student•

A partir de iOS 16.0+ esta forma de implementar los NavigationView y NavigationLink pasa a ser obsoleta (deprecated). Se recomienda reemplazar los NavigationView por NavigationStack. Acá pueden ver en detalle la documentación oficial de apple.

Ulises Serrano Pérez

student•

Tienes razón a mi me quedo de la siguiente manera. Se tiene que hacer unos cambios para que funcione con la nueva versión.

struct Navigations: View {
    var body: some View {
        NavigationStack{
            Text("Bienvenidos")
                .navigationTitle("Home")
                .navigationBarTitleDisplayMode(.inline)
                .toolbar {
                    NavigationLink {
                        Dividers()
                    } label: {
                        Image(systemName: "plus")
                        Text("Agregar")
                    }
                }
            NavigationLink {
                TabViews()
            } label: {
                Text("Mostrar tabs")
            }
        }
    }
}

Nicolas Silva

student•

cada vez se parece mas a react native :)

Alfredo Gonzalez

student•

Porque funciona utilizar la funcion toggle de la propiedad para cambiar de vista?. Me refiero a que el modificado state hace que guarde el valor, y si esta en false al clickear el boton se activa y me cambia de pantalla. Pero al regresar el valor de dicha variable deberia seguir en true. por lo que no tendria que cambiarme de pantalla si clickeo el boton.

En que momento la variable con el modificador state vuelve a su valor original ??

@Juan Villalvazo

Julio Ceballos

student•

Iba a hacer la misma pregunta, no tengo claro en qué momento vuelve a ser false la variable isDividersActive.

Sospecho que al navegar a la vista Dividers se destruye la vista Navigations y al regresar al Home se crea nuevamente la vista Navigations y en esta se inicializa la variable en false.

Espero que alguien con los conocimientos adecuados confirme mi sospecha o nos explique como funciona en realidad.

Alfredo Gonzalez

student•

Me parece mas bien que tiene que ver con el binding, puesto que estuve checando que se utiliza para cambiar datos en una pantalla que afecten a otra, y tal vez al llamar a la funcion NavigationLink pasandole por parametro ese binding $ lo cambia de valor al dejar la vista

Nicolas Silva

student•

La version nueva de NavigationLink es asi,

NavigationLink("Navegar a vista de tabviews")  {
  TabViews()
}

Joaquin Segovia

student•

Nota: WhatsApp usa el large y Telegram usa el inline para chat y contactos

Stiven Castillo Montero

student•

Pero qué bizzarro tener que colocar flags (isDividerActive) para manejar la navegación

Juan Salvador Vilca Paredes

student•

cuando le agarras el hilo ya no se ve bizarro

Ulises Serrano Pérez

student•

Es cierto, esto quedo deprecated, y creo que es una mejora sustancial.

Antonio Ineba Corell

student•

Hola Buenas tardes tengo un problema con el curso de SwiftUI desde cero en la clase numero 20 me da error, no me conecta quien me puede ayudar ??

el problema que tengo es la vista Navigations , me da error , primero no me acepta el modificador .toolbar , ahora lo he puesto en comentario

espero su respuesta

les dejo una imagen

un saludo

Joalin Pineda

student•

¡Hola! Revisa que los corchetes y paréntesis de las funciones estén correctamente cerrados, también en la sección de archivos de la clase puedes encontrar el código del profesor para poder compararlo con el tuyo. Si pudieras compartirnos tu código completo, podríamos ayudarte a identificar el error.

A continuación te comparto el código de la vista navigations

import SwiftUI

struct Navigations: View {
    
    @State var imagenesIsActive:Bool = false
    
    var body: some View {
        
        
        
        NavigationView {
            
            VStack{
                
                Text("Hola Mundo").navigationTitle("Primer pantalla").padding(.bottom,18 )
                
                NavigationLink("Divisores", destination: Divisores())
                
                
                Button(action: {imagenesIsActive = true}, label: {
                        Image("platzi").resizable().aspectRatio(contentMode: .fit).frame(width: 150, height: 150)                })
                
                
                NavigationLink(
                    destination: Imagenes(),
                    isActive: $imagenesIsActive,
                    label: {
                        EmptyView()
                    })
                
            }
        }
        
        
        
    }
}

struct Navigation_Previews: PreviewProvider {
    static var previews: some View {
        Navigations()
    }
}

Christians Bonilla

student•

Ya esta deprecated ahora toca con NavigationStack

 NavigationStack {
            VStack {
                Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/).navigationTitle("Home").navigationBarTitleDisplayMode(.inline).toolbar(content: {
                    ToolbarItem( placement: .topBarTrailing) {
                        Button(action:
                                
                                {
                            print("go next")
                            goNext = true
                            
                        }
                               , label: {
                            Text("+")
                        })
                        
                    }
                })
                
            }.navigationDestination(
                isPresented: $goNext) {
                    Dividers()
                }
            
            
        }
```NavigationStack {

VStack {

Text(/\*@START\_MENU\_TOKEN@\*/"Hello, World!"/\*@END\_MENU\_TOKEN@\*/).navigationTitle("Home").navigationBarTitleDisplayMode(.inline).toolbar(content: {

ToolbarItem( placement: .topBarTrailing) {

Button(action:



{

print("go next")

goNext = **true**



}

, label: {

Text("+")

})



}

})



}.navigationDestination(

isPresented: $goNext) {

Dividers()

}





}

Juan Salvador Vilca Paredes

student•

se puede hacer maravillas combinando NavigationView, ForEach, Enum y Swtich

struct NavigationsView: View {
    var body: some View {
        NavigationStack{
            VStack {
                Text("Hello, World!")
                    .navigationTitle("Home ")
                    .navigationBarTitleDisplayMode(/**/.inline/**/)
                    .toolbar {
                        ToolbarItem(placement: .navigationBarTrailing) {
                            
                            NavigationLink("+", destination: DividersView())
                            
                        }
                    }
                
                NavigationLink("Navegar a vista de ImagesView") {
                    ImagesView()
                }
            }
        }
    }
}

struct Navigations: View {
    var body: some View {
        NavigationStack{
            Text("Bienvenidos")
                .navigationTitle("Home")
                .navigationBarTitleDisplayMode(.inline)
                .toolbar {
                    NavigationLink {
                        Dividers()
                    } label: {
                        Image(systemName: "plus")
                        Text("Agregar")
                    }
                }
            NavigationLink {
                TabViews()
            } label: {
                Text("Mostrar tabs")
            }
        }
    }
} 

import SwiftUI

struct Navigations: View {
    
    @State var imagenesIsActive:Bool = false
    
    var body: some View {
        
        NavigationView {
            
            VStack{
                
                Text("Hola Mundo").navigationTitle("Primer pantalla").padding(.bottom,18 )
                
                NavigationLink("Divisores", destination: Divisores())
                
                Button(action: {imagenesIsActive = true}, label: {
                        Image("platzi").resizable().aspectRatio(contentMode: .fit).frame(width: 150, height: 150)                })
                
                NavigationLink(
                    destination: Imagenes(),
                    isActive: $imagenesIsActive,
                    label: {
                        EmptyView()
                    })
                
            }
        }
        
    }
}

struct Navigation_Previews: PreviewProvider {
    static var previews: some View {
        Navigations()
    }
}

 NavigationStack {
            VStack {
                Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/).navigationTitle("Home").navigationBarTitleDisplayMode(.inline).toolbar(content: {
                    ToolbarItem( placement: .topBarTrailing) {
                        Button(action:
                                
                                {
                            print("go next")
                            goNext = true
                            
                        }
                               , label: {
                            Text("+")
                        })
                        
                    }
                })
                
            }.navigationDestination(
                isPresented: $goNext) {
                    Dividers()
                }
            
        }
```NavigationStack {

VStack {

Text(/\*@START\_MENU\_TOKEN@\*/"Hello, World!"/\*@END\_MENU\_TOKEN@\*/).navigationTitle("Home").navigationBarTitleDisplayMode(.inline).toolbar(content: {

ToolbarItem( placement: .topBarTrailing) {

Button(action:

{

print("go next")

goNext = **true**

}

, label: {

Text("+")

})

}

})

}.navigationDestination(

isPresented: $goNext) {

Dividers()

}

}

NavigationView, NavigationLink e introducción a múltiples pantallas

Introducción a SwiftUI

¿Qué es SwiftUI?

Instalación de Xcode

Uso y características de Xcode

Las bases de Swift para SwiftUI

Variables y constantes

Funciones y argument labels

Structs, propiedades y métodos

Diferencia entre struct y class

Computed properties

Las bases de SwiftUI e introducción a protocolos

Vistas y controles

¿Qué son las vistas y controles en SwiftUI?

Botones

Imágenes

Campos de texto y el property wrapper @state

Divisores

Contenedores de interfaz de usuario

HStack, VStack y el elemento Spacer

Resolviendo el reto de contenedores

ZStack y el modificador padding

Dividir la app en módulos de contenedores

Más vistas y controles

TabView

NavigationView, NavigationLink e introducción a múltiples pantallas

VideoPlayer

Las posibilidades de SwiftUI

Las posibilidades de SwiftUI