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

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()
    }
}
"Ejemplo de encapsulación de vistas en Group de SwiftUI"
  • 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")
                
            }
        }
    }
}

 

"Ejemplo de evitar la limitación en Group de SwiftUI"
  • 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))

 

"Ejemplo de aplicar estilos en Group de SwiftUI"

 

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)

 

"Ejemplo de aplicar estilos en Group de SwiftUI"

 

 

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 SDOS.

Related posts

Cómo usar componentes de UIKit en SwiftUI iOS

SwiftUI - Cómo usar componentes de UIKit en...

Cómo hacer una presentación modal en SwiftUI iOS

SwiftUI - Cómo hacer una presentación modal

Comments
¿Qué opinas? Escríbenos. Nos encantará leerte :)