ViewModifier en SwiftUI en Español

Hoy en SwiftBeta vamos a aprender a crear un modificador en SwiftUI y vamos a reusarlo en otras vistas. Hemos visto los modificadores desde que empezamos esta serie de posts pero aún no hemos creado ninguno. Son muy útiles para encapsular código y reutilizarlo en multiples partes de nuestra app.

ViewModifier en código

Lo primero de todo que vamos hacer es crear un proyecto en Xcode. Y dentro de ContentView vamos a crear la siguiente vista:

struct ContentView: View {
    var body: some View {
        VStack {
            Text("¡Suscríbete a SwiftBeta! 🎉")
                .bold()
                .padding()
            Button("Ahora mismo") {
                print("Suscribir canal de Youtube")
            }
        }
    }
}

Si te fijas, el Button no tiene estilo, vamos a crear un modificador que le de un aspecto más llamativo y que pueda ser fácilmente reusable en otras partes de nuestra app.
Lo siguiente que vamos hacer es crear una struct llamada NewButtonModifier que conforme el protocolo ViewModifier.
Al conformar el protocolo verás que hay un requerimiento, y es crear una función llamada body. Vamos a crearla y a retornar el mismo parámetro que recibimos.

struct NewButtonModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
    }
}

Este content es la vista a la que queremos aplicar los cambios. Aquí podemos aplicar todos los modificadores que queramos, pues vamos a ello:

struct NewButtonModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.body)
            .foregroundColor(.white)
            .padding()
            .background(Color.blue)
            .cornerRadius(20)
    }
}

hemos añadido varios modificadores que queremos aplicar a nuestra vista. Ahora solo debemos ir a ContentView y usar nuestro nuevo modificador:

struct ContentView: View {
    var body: some View {
        VStack {
            Text("¡Suscríbete a SwiftBeta! 🎉")
                .bold()
                .padding()
            Button("Ahora mismo") {
                print("Suscribir canal de Youtube")
            }
            .modifier(NewButtonModifier())
        }
    }
}

Pero aún podemos mejorar nuestro código, podemos evitar usar siempre el .modifier y luego instanciar nuestro modificador para hacerlo vamos a crear una extension de View:

extension View {
    func newButtonModifier() -> some View {
        self.modifier(NewButtonModifier())
    }
}

De esta manera con este sutil cambio podríamos actualizar  nuestro código y quedaría mucho más limpio:

struct ContentView: View {
    var body: some View {
        VStack {
            Text("¡Suscríbete a SwiftBeta! 🎉")
                .bold()
                .padding()
            Button("Ahora mismo") {
                print("Suscribir canal de Youtube")
            }
            .newButtonModifier()
        }
    }
}