TapGesture en SwiftUI
TapGesture en SwiftUI

TAPGESTURE en SWIFTUI en Español

TapGesture en SwiftUI 2.0 nos sirve para ejecutar alguna acción cuando un user pulse la vista. Podemos pasarle el número de veces que el user debe pulsar la vista antes de que se realice la acción que tenemos en el modificador .onEnded

SwiftBeta

Tabla de contenido


👇 SÍGUEME PARA APRENDER SWIFTUI, SWIFT, XCODE, etc 👇
TapGesture en SwiftUI Curso de SwiftUI
TapGesture en SwiftUI Curso de SwiftUI

En SwiftUI 2.0 podemos añadir gestos a nuestras vistas, en el ejemplo de hoy vamos a ver a cómo al pulsar una vista (en nuestro caso un rectángulo) podemos realizar una acción. Hasta ahora habíamos usado Buttons para hacer precisamente esto, que al ser pulsados realizaran una acción (esta acción puede ser de cualquier tipo: printar un mensaje por consola, realizar una animación, hacer una llamada a nuestro servidor, etc).
Para hacerlo vamos a usar el modificador .gesture con una instancia de TapGesture (al final del post veremos otra manera mucho más simple)

TapGesture en código

Lo primero que vamos hacer es añadir un rectángulo a nuestra vista:

struct ContentView: View {
    var body: some View {
        RoundedRectangle(cornerRadius: 20)
            .frame(width: 100, height: 100)
    }
}

A continuación, vamos a usar el modificador .gesture y vamos a pasarle una instancia de TapGesture

struct ContentView: View {
    var body: some View {
        RoundedRectangle(cornerRadius: 20)
            .frame(width: 100, height: 100)
            .gesture(
                TapGesture()
                    // TODO:
            }))
    }
}

Si compilamos y tapeamos (pulsamos) nuestra vista, vemos que no está pasando nada. Esto es porque en la instancia de TapGesture() debemos usar otro modificador. En este caso es el .onEnded. Cuando el user pulse nuesta vista este closure será llamado y podremos realizar la acción que queramos (printar por consola, activar una animación, hacer una petición HTTP a nuestro servidor, etc). En nuestro caso vamos a printar un mensaje por consola.

struct ContentView: View {
    var body: some View {
        RoundedRectangle(cornerRadius: 20)
            .frame(width: 100, height: 100)
            .gesture(
                TapGesture()
                    .onEnded({ _ in
                        print("View tapped")
            }))
    }
}

De esta manera, cada vez que pulsemos nuestro rectángulo, aparecerá por consola el mensaje de "View Tapped". Esto ocurre cuando pulsamos una vez la vista, pero podemos cambiarlo, podemos pasarle un valor en el inicializador de TapGesture para indicarle que queremos que realice la acción del .onEnded cuando se pulse 2 veces, vamos a verlo:

struct ContentView: View {
    var body: some View {
        RoundedRectangle(cornerRadius: 20)
            .frame(width: 100, height: 100)
            .gesture(
                TapGesture(count: 2)
                    .onEnded({ _ in
                        print("View tapped")
            }))
    }
}

De esta manera, cuando el user pulse dos veces en nuestro rectángulo, aparecerá por consola "View tapped"

onTapGesture

Hay otra manera de añadir TapGestures en nuestras vistas, y es usando el modificador .onTapGesture, al hacerlo reducimos considerablemente el número de líneas usadas en los ejemplos anteriores:

struct ContentView: View {
    var body: some View {
        RoundedRectangle(cornerRadius: 20)
            .frame(width: 100, height: 100)
            .onTapGesture {
                print("View tapped")
            }
    }
}

De esta manera tenemos el mismo comportamiento, el user cuando pulsa nuestro rectángulo aparece por consola "View tapped"

Y también podemos pasarle el número de veces que el user toca la vista para que se realice la acción dentro del closure:

struct ContentView: View {
    var body: some View {
        RoundedRectangle(cornerRadius: 20)
            .frame(width: 100, height: 100)
            .onTapGesture(count: 2) {
                print("View tapped")
            }
    }
}

Hasta aquí el post de TapGesture en SwiftUI!

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