Estilo de botón en SwiftUI

SwiftUI proporciona una forma poderosa de crear y personalizar vistas usando protocolos de estilo. Estos protocolos nos permiten definir la apariencia de nuestras vistas en una sola línea de código.

Como resultado, las vistas son visualmente consistentes, lo que hace que la aplicación sea más fácil de usar y más atractiva.

Botón de estilo sin ButtonStyle

Podríamos diseñar nuestro botón en línea aplicándole diferentes modificadores. Considere este ejemplo:

Button("Tap me") {}
    .font(.system(.callout, weight: .bold))
    .foregroundColor(.white)
    .frame(maxWidth: .infinity, maxHeight: 48)
    .background(.blue)
    .cornerRadius(8)

Este enfoque está completamente bien si diseña un solo botón. Pero si necesita desarrollar varios botones con el mismo estilo, debe usar el ButtonStyleprotocolo. Ayudará a compartir y aplicar el mismo estilo a diferentes botones en toda la aplicación.

Botón de estilo con ButtonStyle

Vamos a crear nuestro estilo de botón personalizado llamado PrimaryButtonStyle. Este es el estilo utilizado para los botones principales en toda la aplicación.

Echemos un vistazo a este ejemplo:

struct PrimaryButtonStyle: ButtonStyle {
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .font(.system(.callout, weight: .bold))
            .foregroundColor(.white)
            .frame(maxWidth: .infinity, maxHeight: 48)
            .background(.blue)
            .cornerRadius(8)
    }
}

Para aplicar el estilo de botón creado, intente escribir esto:

Button("Tap me") {}
    .buttonStyle(PrimaryButtonStyle())

ButtonStyleConfiguration

El objeto de configuración del botón tiene varias propiedades, incluido el isPressedvalor booleano, que indica si el botón se está presionando o no. Podríamos usar eso para cambiar el estilo de nuestro botón cuando un usuario toca un botón. Para ello, podríamos escribir algo como esto:

struct PrimaryButtonStyle: ButtonStyle {
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .font(.system(.callout, weight: .bold))
            .foregroundColor(.white)
            .frame(maxWidth: .infinity, maxHeight: 48)
            .background(configuration.isPressed ? .blue.opacity(0.75) : .blue)
            .cornerRadius(8)
    }
}

Consejo profesional

Nuestro código se puede hacer más limpio y legible agregando la siguiente extensión a PrimaryButtonStyle:

extension ButtonStyle where Self == PrimaryButtonStyle {
    
    static var primary: PrimaryButtonStyle {
        PrimaryButtonStyle()
    }
}

Button("Tap me") {}
    .buttonStyle(.primary)

Con ButtonStyle, podemos definir la apariencia, el diseño y las interacciones de un botón y garantizar la coherencia en toda la aplicación.

Además, proporciona una forma de encapsular la lógica y el estilo relacionados con los botones en componentes reutilizables. Esto hace que el código base sea más fácil de mantener y escalable.

¡Gracias por leer!

Si encuentra útil este artículo, asegúrese de darle un aplauso para que otros puedan descubrirlo más fácilmente.