SwiftUI: ¿Qué son los modificadores de vista?

SwiftUI se está convirtiendo rápidamente en la opción popular para crear aplicaciones de iOS, y una de las cosas más comunes que usa son ViewModifiers. Si has trabajado con SwiftUI antes de leer esto y no sabes qué son los ViewModifiers, te garantizo que los has usado antes sin darte cuenta.

ViewModifiers son métodos a los que llamas en las vistas que usas en tu aplicación para personalizar su apariencia y comportamiento. Los usa para cambiar colores y tamaños, para agregar gestos, para agregar opciones de accesibilidad, etc. a sus Vistas, si alguna vez las ha usado .backgroundo .foregroundColoren su proyecto, estos son ejemplos de ViewModifiers.

¿Cómo se usan los ViewModifiers?

Comencemos por crear un proyecto, no lo aburriré con todo el proceso, así que asegúrese de seleccionar SwiftUI en lugar de Storyboard cuando haga su proyecto.

La vista predeterminada creada para usted ya usa algunos modificadores, así que echemos un vistazo a eso

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .padding()
    }
}

• .padding: Le permite especificar el relleno para su Vista, tenga en cuenta que debido a que no proporcionamos ningún valor, aplica el relleno predeterminado del sistema para todos los lados. Puede especificar los bordes y valores como este .padding(.top, 12)o .padding(.horizontal, 12)por ejemplo
• .foregroundColor: Establecerá el color de primer plano para la vista, lo que afectará los colores del texto, los tintes, etc.

• .frame: se utiliza para cambiar el tamaño de una vista
• .font: Se utiliza para cambiar la familia de fuentes, el tamaño, etc. para unText

Antes de comenzar, revisemos las restricciones que queremos usar en el botón: relleno, radio de esquina, color de fondo.

Comencemos agregando un botón simple con algo de texto:

Button(action: {
    // On click
}) {
    Text("Label")
}

Después de agregar nuestros modificadores:

Button(action: {
    // On click
}) {
    Text("Label")
        .padding(.horizontal, 20)
        .padding(.vertical, 14)
        .foregroundColor(Color.white)
}
.background(Color.blue)
.cornerRadius(14)

      
                

                    
                    
                
            

El ejemplo anterior es muy simple, pero si su proyecto tiene muchas Vistas con estilos similares (valores de relleno comunes, colores de fondo temáticos, etc.) puede volverse muy molesto tener que repetir los mismos modificadores rápidamente. Afortunadamente, SwiftUI te permite crear tus propios modificadores personalizados.

Consideremos el ejemplo anterior, si nota que el texto del botón no coincide exactamente con lo que estábamos tratando de construir. Vamos a crear un modificador personalizado para el texto del botón:

struct ButtonTextModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.system(size: 17, weight: .semibold))
            .lineSpacing(22)
    }
}

Text("Label")
  .padding(.horizontal, 20)
  .padding(.vertical, 14)
  .foregroundColor(Color.white)
  .modifier(ButtonTextModifier())

      
                

                    
                    
                
            

extension View {
    func buttonText() -> some View {
        modifier(ButtonTextModifier())
    }
}

Text("Label")
  .padding(.horizontal, 20)
  .padding(.vertical, 14)
  .foregroundColor(Color.white)
  .buttonText()