BUTTON en SWIFTUI en Español

Button es una vista que nos sirve para que el usuario interaccione con nuestra app. Es decir, para lanzar alguna acción o tarea cada vez que el usuario lo pulse. Esto puede ser navegar a otra pantalla, activar una animación, una llamada API a backend, , etc.

Button en código

Para usarlo debemos usar alguno de sus inicializadores, por ejemplo:

Button(action: {
    print("Suscríbete a SwiftBeta")
}, label: {
    Text("Suscríbete")
})

Con este código, creamos un botón con título "Suscríbete", con una acción de printar un mensaje por consola. Cuando el user pulse el Button, como acción se printará un mensaje por consola.

También podríamos a ver usado otro inicializador:

Button("Suscríbete") {
    print("Suscríbete a SwiftBeta")
}

Fíjate que la primera opción tiene más lineas de código para hacer lo mismo, pero tiene una ventaja, y es que podemos crear una vista custom para nuestro Button, es decir, dentro del trailing closure label podemos componer una vista con varios elementos y no solo un Text. Esto es lo que vamos a ver ahora

Cómo crear Buttons con diseño propio

Cuando creamos una app queremos aplicar un diseño a nuestras vistas, ya sea con colores, tamaños, márgenes, etc. Lo que vamos a ver ahora es a crear Buttons más dinámicos para que podamos modificar su aspecto.

struct ContentView: View {
    var body: some View {
        VStack {
            Button(action: {
                print("Suscríbete a SwiftBeta")
            }, label: {
                Text("Suscríbete".uppercased())
                    .font(.largeTitle)
                    .fontWeight(.bold)
                    .foregroundColor(.white)
                    .padding()
                    .background(Color.red)
                    .cornerRadius(10)
                    .shadow(radius: 10)
            })
            Button(action: {
                print("Dale Like al video")
            }, label: {
                Circle()
                    .fill(Color.blue)
                    .frame(width: 200, height: 200)
                    .shadow(radius: 10)
                    .overlay(
                        Image(systemName: "hand.thumbsup.fill")
                            .foregroundColor(.white)
                            .font(.system(size: 70, weight: .bold))
                    )
            })
        }
    }
}

En este caso hemos creados dos botones dentro de un VStack estos dos botones está compuestos por distintos tipos de vistas en SwiftUI y distintos modificadores.

En el primer caso hemos creado un botón que muestra un texto y en el segundo caso muestra un icono. Pero en ambos hemos usado modificadores para no mostrar el típico Button del sistema.

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