Sheets en SwiftUI #WWDC22

Hoy en SwiftBeta vamos a ver cómo presentar sheets custom con SwiftUI. Y cuando digo custom es que ahora podemos especificar el tamaño exacto de nuestro sheet. Antes solo teníamos dos opciones, verás que ahora hay una multitud de tipos que nos permiten seleccionar el tamaño perfecto. También vamos a aprovechar y os voy a enseñar una animación que podéis aplicar a vuestras apps.

Si quieres apoyar al canal, puedes suscribirte, de esta manera seguiré subiendo contenido semanal sobre Swift, SwiftUI, Xcode y mucho más.

Aquí podrás encontrar todos los cambios introducidos en SwiftUI

Apple Developer Documentation

Creamos el proyecto en Xcode 14

Vamos a crear un nuevo proyecto con Xcode 14, y seleccionamos SwiftUI. Una vez allí, nos vamos a nuestro ContentView.

Vamos a crear una vista muy sencilla con todo lo que hemos ido aprendiendo del canal.

struct ContentView: View {
    @State var isActive: Bool = false
    @State var showSheet: Bool = false
    
    var body: some View {
        VStack {
            Text("¡Suscríbete a SwiftBeta! 🎉")
                .font(isActive ? .largeTitle.weight(.heavy) : .headline)
                .foregroundStyle(isActive ? .black : .green)
                .padding(isActive ? 20 : 0)
                .background(isActive ? .orange : .clear)
                .cornerRadius(isActive ? 20 : 0)
                .onTapGesture { withAnimation { isActive.toggle() } }
            Button("Open Sheet") {
                showSheet.toggle()
            }
            .padding(.top, 32)
        }
    }
}

Fíjate qué animación más sencilla hemos añadido. Con un simple tap en nuestro Text podemos ver la transición completa 🎉. Si te fijas hemos añadido un Button, cada vez que se pulsa el valor de la propiedad showSheet cambia. Vamos a utilizar este trigger para abrir nuestro sheet. Para ello utilizamos el modificador .sheet:

struct ContentView: View {
    @State var isActive: Bool = false
    @State var showSheet: Bool = false
    
    var body: some View {
        VStack {
            Text("¡Suscríbete a SwiftBeta! 🎉")
                .font(isActive ? .largeTitle.weight(.heavy) : .headline)
                .foregroundStyle(isActive ? .black : .green)
                .padding(isActive ? 20 : 0)
                .background(isActive ? .orange : .clear)
                .cornerRadius(isActive ? 20 : 0)
                .onTapGesture { withAnimation { isActive.toggle() } }
            Button("Open Sheet") {
                showSheet.toggle()
            }
            .padding(.top, 32)
        }
        .sheet(isPresented: $showSheet) {
            Text("Novedades de SwiftUI")
        }
    }
}

Si compilamos y pulsamos nuestro Button, vemos como aparece la nueva vista con un Text que pone "Novedades a SwiftUI". Vamos a customizar el tamaño de nuestro sheet, para hacerlo vamos a utilizar un nuevo modificador:

struct ContentView: View {
    @State var isActive: Bool = false
    @State var showSheet: Bool = false
    
    var body: some View {
        VStack {
            Text("¡Suscríbete a SwiftBeta! 🎉")
                .font(isActive ? .largeTitle.weight(.heavy) : .headline)
                .foregroundStyle(isActive ? .black : .green)
                .padding(isActive ? 20 : 0)
                .background(isActive ? .orange : .clear)
                .cornerRadius(isActive ? 20 : 0)
                .onTapGesture { withAnimation { isActive.toggle() } }
            Button("Open Sheet") {
                showSheet.toggle()
            }
            .padding(.top, 32)
        }
        .sheet(isPresented: $showSheet) {
            Text("Novedades de SwiftUI")
                .presentationDetents([.medium])
        }
    }
}

Fíjate que hemos añadido el valor de medium, si ahora compilamos y pulsamos el Button, nuestro sheet solo llega hasta el medio de la pantalla. Si intentamos abrirlo más no podemos. Esto lo podemos soluccionar añadiendo un valor más .large.

.presentationDetents([.medium, .large])

Si ahora compilamos, nuestro sheet llega al medio y también podemos abrirlo completamente. Pero como os he dicho, ahora tenemos nuevos casos que podemos añadir como fraction y height. Vamos a añadir que nuestro sheet se abra un 20% del tamaño de nuestra pantalla, para ello pondremos fraction 0.2 para ver que se abre muy poco nuestro sheet:

.presentationDetents([.medium, .fraction(0.2)])

Si compilamos vemos que nuestro sheet se presenta solo un 20% de nuestra pantalla. Podemos hacer exactamente lo mismo con height pero el valor sería más acorde a un dispositivo, no sería lo mismo un height de 100 para un iPhone que para un iPad.