SwiftUI #17: Modificadores personalizados

Un modificador personalizado encapsula múltiples modificadores en una sola estructura para aplicarlos después usando el modificador modifier(_:) que recibe una estructura que conforma ViewModifier.

Primero hay que encapsular los modificadores en la estructura que conforma a ViewModifier -en este caso, BorderCaption. Esta estructura tiene una función body que recibe un Content al que vamos a aplicar los modificadores.

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

Luego, se agrega un método a View por medio de una extensión, donde se invoca modifier(_:) pasando la estructura que creamos antes (i.e. BorderedCaption).

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

Finalmente, se invoca el nuevo modificador .borderedCaption en la estructura cliente -en este caso, ContentView.

struct ContentView: View {
  var body: some View {
    Image(systemName: "bus")
      .resizable()
      .frame(width: 50, height: 50)
    Text("Downtown Bus")
      .borderedCaption()
  }
}