Como vimos en un post pasado, las vistas en SwiftUI, o más bien, los componentes que crean las vistas tienen una serie de modificadores que nos sirven para modificar ciertos atributos o propiedades de estas vistas. Así podemos cambiar la fuente de un texto, el color, el padding, ….

Ahora bien, estos modificadores podemos crearlos de tal forma que su reutilización en otros componentes de vista sea cosa fácil y no tengamos que estar escribiendo una otra vez que un texto va a tener un fuente de sistema con 32 puntos de altura y sea de color gris.

Creando modificadores de vista personalizados en SwiftUI

Para crear estos modificadores que aplicaremos a diferentes vistas utilizaremos el protocolo ViewModifier el cual implementaremos en nuestros struct donde configuraremos nuestro modificador.

Cuando creemos nuestro modificador customizado, le daremos un nombre representativo del propósito de este, que lo podamos reconocer únicamente por el nombre. Por ejemplo, si queremos crear un modificador para aplicar a un texto donde utilizaremos siempre el estilo de fuente caption y un color de texto tipo secondary, un buen nombre podría ser: CaptionTextFormat. Tanto caption como secondary son formatos predefinidos que vienen en el framework.

struct CaptionTextFormat: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.caption)
            .foregroundColor(.secondary)
    }
}

Una vez tenemos creado nuestro modificador, para aplicarlo a nuestra vista crearemos una extensión de View donde llamaremos a nuestro modificador.

extension View {
    func captionTextFormat() -> some View {
        modifier(CaptionTextFormat())
    }
}

Y por último aplicamos dicho modificador a nuestros componentes tal que así:

Text("Some additional information...")
    .captionTextFormat()

De esta forma podemos ir creándonos nuestra propia librería de componentes de vista y nuestros modificadores que iremos utilizando según nos convenga en todas las vistas que deseemos de nuestro desarrollo.

Ejemplo de creación de modificador de texto añadiendo borde y bordes redondeados

Tal como hemos dicho antes, primero creamos nuestra struct que implemente el protocolo ViewModifier.

struct BorderedCaption: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.caption2)
            .padding(10)
            .overlay(
                RoundedRectangle(cornerRadius: 15)
                    .stroke(lineWidth: 1)
            )
            .foregroundColor(Color.blue)
    }
}

A continuación creamos una extensión de View e instanciamos nuestro modificador para tenerlo disponible:

extension View {
    func borderedCaption() -> some View {
        modifier(BorderedCaption())
    }
}

Y por último aplicamos este modificador a nuestro componente:

Image(systemName: "bus")
    .resizable()
    .frame(width:50, height:50)
Text("Downtown Bus")
    .borderedCaption()