BUTTON en SWIFTUI en Español
Button en SwiftUI

BUTTON en SWIFTUI en Español

Button en SwiftUI 2.0 es una vista que ponemos en nuestra app iOS para que un usuario interactúe y realicemos alguna acción como: navegar a otra pantalla, una llamada API, validar los campos de un formulario, etc

SwiftBeta
Aprende SwiftUI desde cero

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")
})
Código para crear un Button en SwiftUI

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")
}
Código para crear un Button en SwiftUI con otro inicializador
Button en SwiftUI
Simulador con un Button en SwiftUI

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))
                    )
            })
        }
    }
}
Código con 2 Buttons en SwiftUI

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.

Button en SwiftUI
Simulador con 2 tipos de Button en SwiftUI

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

Si quieres seguir aprendiendo sobre SwiftUI, Swift, Xcode, o cualquier tema relacionado con el ecosistema Apple


SwiftUI desde cero