FullScreenCover y Sheet en SWIFTUI en Español

FullScreenCover y Sheet en SwiftUI son unos modificadores que nos permiten navegar a otras pantallas de nuestra app. Ya hemos visto en otros posts cómo navegar a distintas pantallas con NavigationView y NavigationLink y también en otro post vimos TabView.

Hoy lo que vamos a ver es muy sencillo, vamos a ver cómo al pulsar un botón en la vista 1 mostramos una vista 2 que se superpone a la que ya teníamos.
Para hacerlo usaremos los modificadores:

• FullScreenCover
• Sheet

La única diferencia entre las dos es que al mostrar una vista con FullScreenCover la pantalla nueva que mostramos ocupa toda la pantalla, mientras que si usamos Sheet no ocupa la pantalla al 100%, queda un pequeño margen en la parte superior.

FullScreenCover en código

Una vez tenemos construida nuestra vista, usamos el modificador .fullScreenCover y tendremos que enviar 3 parámetros:

• isPresented: Nos servirá para cambviar el valor de una propiedad @State de tipo Bool que si es true mostrará la nueva vista y si es false la ocultará.
• onDismiss: aquí pondremos una serie de instrucciones para indicar qué queremos que pase cuando la vista que acabamos de mostrar desaparezca. En este caso indicamos que la propiedad vuelva a tener el estado false.
• content: aquí pondremos la vista que queremos que se muestre. Vamos a poner una sencilla. Recomiendo extraer vistas muy grandes en otras structs para que dentro del content sea más fácil programar.

struct ContentView: View {
    
    @State var isPresented: Bool = false
    
    var body: some View {
        VStack {
            Text("¡Suscríbete a SwiftBeta!")
                .padding()
            Button("Ok") {
                isPresented = true
            }
        }.fullScreenCover(isPresented: $isPresented,
                          onDismiss: { isPresented = false }, content: {
                            ZStack {
                                Color.red.ignoresSafeArea()
                                Button("¡Bienvenido a SwiftBeta! 🎉") {
                                    isPresented = false
                                }
                            }
                            
                          })
    }
}

Cuando compilamos la aplicación estaremos en la View 1. Si pulsamos el botón, aparecerá por encima la View 2. Si queremos ocultar la View 2 solo debemos pulsar el botón con texto "¡Bienvenido a SwiftBeta! 🎉". Ya que cambiará el valor de la propiedad isPresented a false.

Sheet en código

Ahora vamos a reusar código y vamos a sustituir .fullScreenCover por .sheet. Como hemos dicho antes, la única diferencia es que con el modificador .sheet la View 2 que aparecerá no ocupará toda la pantalla. Vamos a verlo:

struct ContentView: View {
    
    @State var isPresented: Bool = false
    
    var body: some View {
        VStack {
            Text("¡Suscríbete a SwiftBeta!")
                .padding()
            Button("Ok") {
                isPresented = true
            }
        }.sheet(isPresented: $isPresented,
                onDismiss: { isPresented = false }, content: {
                    ZStack {
                        Color.red.ignoresSafeArea()
                        Button("¡Bienvenido a SwiftBeta! 🎉") {
                            isPresented = false
                        }
                    }
                    
                })
    }
}

De esta manera no nos haría falta pulsar el botón para ocultar la View 2. Podemos "tirar" la vista hacía abajo para cerrarla.

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