Modificadores y composición de vistas

Un modificador transforma una vista y devuelve otra vista. Encadenándolos construyes apariencia y comportamiento capa a capa. Es simple, pero hay un detalle que confunde a todos al principio: el orden cambia el resultado.

Un modificador devuelve una vista nueva

Cada .algo(...) toma la vista y devuelve una versión modificada, así que se encadenan:

Text("Etiqueta")
    .font(.headline)
    .padding()
    .background(.yellow)
    .clipShape(.rect(cornerRadius: 12))

El orden importa (de verdad)

Como cada modificador envuelve al anterior, cambiar el orden cambia el resultado. Compara:

// Padding y LUEGO fondo → el fondo incluye el padding
Text("A").padding().background(.blue)

// Fondo y LUEGO padding → el fondo va pegado al texto, el padding queda fuera
Text("B").background(.blue).padding()

Modificadores que usarás siempre

Extraer subvistas

Cuando una vista crece, divídela en piezas con nombre. En vez de un body gigante, crea structs o propiedades computadas:

struct Perfil: View {
    var body: some View {
        VStack {
            avatar
            Text("William").font(.title)
        }
    }

    // subvista como propiedad computada
    var avatar: some View {
        Image(systemName: "person.circle.fill")
            .font(.system(size: 80))
            .foregroundStyle(.blue)
    }
}

Modificador propio (ViewModifier)

Si repites la misma combinación de modificadores, encapsúlala:

struct Tarjeta: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding()
            .background(.thinMaterial)
            .clipShape(.rect(cornerRadius: 16))
    }
}

extension View {
    func estiloTarjeta() -> some View { modifier(Tarjeta()) }
}

// uso
Text("Contenido").estiloTarjeta()