Group: el componente de SwiftUI para organizar las vistas de una pantalla

October 21, 2020

El componente Group es una vista que nos ayuda a organizar las vistas de una pantalla. Es un componente equivalente a UIView de UIKit, aunque está orientado a la encapsulación de vistas en su interior. Puedes consultar aquí la documentación oficial.

La creación de este componente se realiza de la siguiente forma:

Group {
 //Your Views here
}

Este componente lo usaremos principalmente en los siguientes casos:

Encapsulación de vistas. Muy útil para encapsular un grupo de vistas ordenando así el código:

struct GroupEncapsulateView: View {
    var body: some View {
        Group {
            Group {
                Text("Text 1")
                Text("Text 2")
            }
            Divider()
            Group {
                Text("Text 3")
                Text("Text 4")
            }
            Divider()
            Group {
                Text("Text 5")
                Text("Text 6")
            }
        }
        .padding()
    }
}

Evitar la limitación de diez vistas como máximo en el ViewBuilder. Los ‘closures’ de inicialización de vistas tienen una limitación técnica que solo permite diez vistas embebidas. Al encapsular las vistas en varios Group solucionamos este problema.

struct GroupSkipLimitView: View {
    var body: some View {
        Group {
            Group {
                Text("Text 1")
                Text("Text 2")
                Text("Text 3")
                Text("Text 4")
                Text("Text 5")
                Text("Text 6")
                Text("Text 7")
                Text("Text 8")
                Text("Text 9")
                Text("Text 10")
                //Text("Text 11") <-- With this the app no compile
            }
            Group {
                Text("Text 11")
                
            }
        }
    }
}

Aplicar estilos a los componentes hijos. Como ya sabemos los estilos aplicados a un componente son propagados a los hijos, por lo que podemos aplicar estilos sobre el Group para no tener que repetirlo en cada componente, dejando el código mucho más limpio y mantenible.

struct GroupApplyStyleView: View {
    var body: some View {
        Group {
            Group {
                Text("Text 1")
                Text("Text 2")
                    .foregroundColor(.blue)
            }
            Divider()
            Group {
                Text("Text 3")
                Text("Text 4")
            }
            .font(.caption)
            .padding(.top, 5)
            .frame(maxWidth: .infinity)
            .background(Color.yellow.opacity(0.2))
            Divider()
            Group {
                Text("Text 5")
                    .font(.subheadline)
                Text("Text 6")
            }
        }
        .navigationBarTitle("Apply Style")
        .font(.title)
        .padding(.all, 20)
        .foregroundColor(.red)
        .background(Color.gray.opacity(0.3))
    }
}

A la hora de aplicar estilos en cualquier componente es muy importante el orden, ya que esto cambia el efecto aplicado. No es lo mismo aplicar un frame y después el color, que hacerlo al revés.

En el siguiente ejemplo el color de background ocupara todo el ancho del componente Group:

Group {
      Text("Text 3")
      Text("Text 4")
  }
  .frame(maxWidth: .infinity)
  .background(Color.yellow.opacity(0.2))

En este otro ejemplo, el color del background solo ocupará el del Text más largo:

Group {
      Text("Text 3")
      Text("Text 4")
  }
  .background(Color.yellow.opacity(0.2))
  .frame(maxWidth: .infinity)

Personalización del componente Group

El componente Group comparte los mismos métodos de personalización que el componente View y pueden ser consultados en este enlace.

Ejemplo

Puedes encontrar también este ejemplo en GitHub aquí, bajo el apartado Group.

¡Muy pronto nuevo artículo sobre el interesante mundo del nuevo framework de Apple! No te lo pierdas y conviértete en todo un experto en SwiftUI con ALTEN.