Cómo usar compositingGroup para aplicar efectos en SwiftUI

Libranner Santos

04 diciembre, 20242min de lectura

Por defecto, SwiftUI aplica los modificadores a las vistas de manera que las vistas hijas son modificadas antes que las vistas padre. Esto, en la mayoría de los casos, funciona correctamente. Sin embargo, en ciertos escenarios necesitamos tener un mayor control sobre cómo se aplican los efectos. Para ello, podemos utilizar el modificador compositingGroup.

Cómo usar compositingGroup

El modificador compositingGroup agrupa múltiples vistas para tratarlas como un único elemento dentro de la interfaz gráfica. Esto nos proporciona más control al aplicar otros modificadores, como, por ejemplo, opacity o shadow.

struct ContentView: View {
  var body: some View {
    HStack(spacing: 30) {
      Rectangle()
        .fill(Color.blue)
        .frame(width: 150, height: 80)

      Text("This is a text")
        .foregroundStyle(.blue)
        .padding()
        .background(Color.white)
    }
    .compositingGroup()
    .shadow(color: .red, radius: 5, x: 5, y: 5)
    .padding(.horizontal)
  }
}

Al usar compositingGroup() permitimos que el modificador shadow, se aplique a las vistas contenedoras en vez de a cada vista por separado. A continuación veamos como se ve el resultado si omitimos el modificador compositingGroup (a la izquierda). Sin embargo, si usamos el modificador vemos como la sombra roja solo se aplica a los contornos de las vistas y no a cada vista por separado (a la dereccha).

Conclusión

El modificador compositingGroup puede marcar la diferencia en cómo se renderizan las vistas de una aplicación e incluso mejorar el rendimiento, ya que influye en cómo se aplican los efectos a las vistas hijas de manera más uniforme.