Como crear un boton en SwiftUI

Un boton es un control UI fundamental presente en todas las aplicaciones, el cual tiene la capacidad de detectar cuando el usuario interactúa con él y realiza una determinada acción.

Si estás familiarizado con la programación iOS, notarás que el botón en SwiftUI se parece mucho a UIButton en UIKit. Sin embargo, en SwiftUI tenemos más flexibilidad y opciones para personalizar un botón.

Comencemos creando un botón básico en SwiftUI y XCode.

Crear un botón en SwiftUI es muy fácil. Solo necesitamos usar las siguientes líneas de código para crearlo:

Button {

	//What to perform

} label: }

	//How the button looks like

}

Cuando creamos un botón tenemos que proporcionar dos bloques de código:

Qué acción tenemos que ejecutar, es decir, el código que se ejecutará una vez que el botón sea presionado o seleccionado por el usuario.

Cómo se ve el botón, es decir, el código que describe la apariencia del botón.

Por ejemplo, si solo queremos mostrar un botón utilizaremos el siguiente código:

struct ContentView: View {
    var body: some View {
        Button {
            print("Hello World tapped!")
        } label: {
            Text("Hello World")
        }
    }
}

Después de implementar este código aparece el botón “Hello World”:

La impresión en la primera declaración envía el mensaje a la consola XCode.

Como personalizar la fuente del boton y el color de fondo

Ahora que hemos aprendido a crear un botón básico, vamos a explorar cómo podemos personalizar su apariencia utilizando los modificadores integrados. Para modificar el color de fondo y el color del texto del botón, puedes utilizar los modifiers background y closeupStyle, como en el siguiente ejemplo:

Text("Hello World")
.background(.blue)
.foregroundStyle(.white)

Si desea cambiar la fuente, puede utilizar el modifier de fuente y especificar el tipo de fuente como en el siguiente ejemplo:

Text("Hello World")
.background(.blue)
.foregroundStyle(.white)
.font(.title)

Después del cambio el botón se verá así:

Como habrás notado, la apariencia del botón podría mejorarse. ¿No sería genial agregar algo de espacio alrededor del texto? Para lograrlo, puedes usar el modifier padding de la siguiente manera:

Text("Hello World)
.padding()
.background(.blue)
.foregroundStyle(.white)

Una vez que realices cambios, el canvas se actualizará automáticamente para reflejar los cambios. Verás una gran mejora en la apariencia del botón, ya que ahora incorpora el espacio deseado alrededor del texto.

Como añadir bordes a un boton

Modifiquemos la apariencia del botón para crear un botón con bordes. Usamos el siguiente código:

Text("Hello World")
.foregroundStyle(.blue)
.padding()
.border(.blue, width: 5)

En este fragmento de código, el color de la fuente es azul y se aplicará un relleno adicional alrededor del texto. El modifier de borde se utiliza para especificar el ancho y el color del borde. Puedes experimentar ajustando el valor del parámetro witdth para ver el efecto en la apariencia del borde.

Como crear un boton con borde y color de fondo

Para crear un botón como el de la siguiente imagen (con bordes y color de fondo):

Vamos a utilizar el siguiente código:

Text("Hello World")
                .fontWeight(.bold)
                .font(.title)
                .padding()
                .background(.red)
                .foregroundStyle(.white)
                .padding(10)
                .border(.red, width: 5)

Para lograr este diseño, utilizamos dos modifiers padding. El primer modifier padding combinado con el modifier background es responsable de crear un botón con relleno y un color de fondo rojo. El segundo modificador padding(10) agrega relleno adicional alrededor del botón, mientras que el modifier border define un borde redondeado en color rojo.

Como crear un boton con los bordes redondeados

SwiftUI tiene un modifier llamado cornerRadius que nos permite crear esquinas redondeadas. Para representar el fondo de los botones con esquinas redondeadas simplemente aplicamos el modifier cornerRadius y especificamos el radio de la esquina, por ejemplo:

.cornerRadius(50)

Para crear un borde con esquinas redondeadas se necesita un enfoque ligeramente diferente, ya que el modificador de borde por sí solo no admite esquinas redondeadas. Necesitamos dibujar un borde separado y superponerlo en el botón. Aquí está el código fuente en Swift para lograrlo:

Text("Hello World")
                .fontWeight(.bold)
                .font(.title)
                .padding()
                .background(.red)
                .cornerRadius(40)
                .foregroundStyle(.white)
                .padding(10)
                .overlay {
                    RoundedRectangle(cornerRadius: 40)
                        .stroke(.red, lineWidth: 5)
                }

El modifier overlay nos permite superponer una vista adicional sobre la vista actual. En el código, usamos el modifier stroke del objeto RoundedRectangle para dibujar un borde con esquinas redondeadas. El modifier stroke nos permite personalizar el color del trazo y el ancho de línea.