Como usar Sheet en SwiftUI

Para los usuarios de iPhone, las vistas modales son un concepto familiar. Son comunmente usadas para presentar formularios para que los rellene el usuario. Por ejemplo, la app Calendario presenta una vista modal para los usuarios para crear un nuevo evento. Similarmente las apps que vienen con el iPhone, Contactos y Recordatorios tambien usan vistas modales que esperan que el usuario rellene formularios.

Qué es una vista modal en SwiftUI

Desde la perspectiva de la experiencia del usuario, una vista modal normalmente se activa al tocar un botón. Una vez más, la animación de transición de la vista modal está a cargo de iOS. Al presentar una vista modal de pantalla completa, se desliza suavemente hacia arriba desde la parte inferior de la pantalla.

En versiones anteriores de iOS, las vistas modales cubrían toda la pantalla. Sin embargo, a partir de iOS 13, las vistas modales se muestran en un formato similar a una tarjeta de forma predeterminada. La vista modal ya no cubre toda la pantalla, sino que cubre parcialmente la vista de contenido subyacente. Aún puede ver el borde superior de la vista principal/de contenido. Además, con esta actualización, las vistas modales se pueden descartar deslizando el dedo hacia abajo desde cualquier lugar de la pantalla. Habilitar este gesto no requiere código adicional, ya que está integrado y lo proporciona iOS. Sin embargo, si prefieres descartar una vista modal usando un botón, tambien puedes implementar esa funcionalidad.

Si bien las vistas modales se utilizan comúnmente para presentar formularios, también se pueden utilizar para presentar otros tipos de información.

En SwiftUI, se utiliza el estilo de presentación de tarjeta para lograr este efecto, y es el estilo de presentación predeterminado para las vistas modales.

Como presentar una nueva vista usando Sheet

Para presentar una vista modal utilizando el estilo de presentación de tarjeta, se aplica el modifier sheet, como se muestra a continuación:

.sheet(isPresented: $showModal) {
    DetailView()
}

Se acepta un valor booleano para indicar si se presenta la vista modal. Si isPresented se establece en verdadero, la vista modal se presentará automáticamente en forma de tarjeta.

Otra forma de presentar la vista modal es la siguiente:

.sheet(item: $itemToDisplay) {

  DetailView()

}

Implementando una Vista Modal usandosela isPresented

Como hemos comentado anteriormente el modifier sheet nos proporciona dos maneras de presentar una modal view. Vamos a empezar viendo isPresented.

Para implementar sheet de esta manera, necesitamos una variable de estado de tipo Bool para realizar un seguimiento del estado de la vista modal. La podemos declarar en ContentView de la siguiente forma:

@State var showDetailView = false

Por defecto está puesta a false. El valor de esta variable será puesto a verdadero cuando el usuario haga tap en una de las filas, cambio que haremos en el código.

Por ejemplo en el siguiente código añadimos el sheet modifier a una List de la siguiente manera:

var body: some View {
        NavigationStack {
            List(articles) { article in
                ArticleRow(article: article)
                
                    .onTapGesture {
                        self.showDetailView = true
                        self.selectedArticle = article
                    }
                
                .listRowSeparator(.hidden)
            }
            .listStyle(.plain)
            .sheet(isPresented: $showDetailView) {
                
                if let selectedArticle = self.selectedArticle {
                    
                    ArticleDetailView(article: selectedArticle)
                    
                }
            }
		.navigationTitle("Your Reading")
	}
	}
}

La presentación de la vista modal depende del valor de la propiedad showDetailView. Por eso lo especificamos en el parámetro isPresented. El cierre del modifier sheet describe el diseño de la vista que se presentará.

Lo único que nos falta es poder detectar cuando un usuario hace tap en la pantalla. Cuando construimos la navigación por la interfaz de usuario, utilizamos NavigationLink para manejar cuando el usuario hace tap en la pantalla.

En SwiftUI hay un handler llamado onTapGesture que puede ser usado para reconocer los taps en la pantalla. Puedes adjuntar este handler para detectar los taps del usuario.

Además vamos a poner el valor de la variable showDetailView a verdadero, lo cual se utiliza para activar la presentación de la vista modal.

onTapGesture {
                        self.showDetailView = true
                        self.selectedArticle = article
                    }

Por lo que nuestra app quedaría de la siguiente manera: