Hoy vamos a repasar las diferentes opciones que tenemos en SwiftUI para crear stacks de vistas o contenedores de otras vistas hijos, estas son:

  • HStack
  • VStack
  • ZStack

Con estos contenedores podremos ir modelando y componiendo la vista a realizar en SwiftUI de una forma fácil y rápida. Por el nombre casi seguro que sabréis que hace cada una o tendréis una aproximación muy cercana a la realidad.

HStack

Esta vista organiza a los elementos hijos en una línea horizontal. Si tenemos un array de elementos que queremos mostrar de forma horizontal en nuestra vista estando cada elemento junto al otro, utilizaríamos este componente.

Un ejemplo de código sería:

var body: some View {
    HStack(
        alignment: .top,
        spacing: 10
    ) {
        ForEach(
            1...5,
            id: \.self
        ) {
            Text("Item \($0)")
        }
    }
}

VStack

Si antes el alineamiento era horizontal, en este caso el alineamiento será vertical. Los items se posicionarán uno debajo del otro.

var body: some View {
    VStack(
        alignment: .leading,
        spacing: 10
    ) {
        ForEach(
            1...10,
            id: \.self
        ) {
            Text("Item \($0)")
        }
    }
}

ZStack

Por último, pero no menos importante, tenemos el ZStack con el que podremos en SwiftUI colocar un conjunto de vista en forma de pila, es decir, una encima de otra. Las vistas se solapan en altura.

El ZStack asigna a cada sucesiva vista secundaria un valor de eje z más alto que el anterior, lo que significa que los elementos secundarios posteriores aparecen «encima» de los anteriores.

let colors: [Color] =
    [.red, .orange, .yellow, .green, .blue, .purple]

var body: some View {
    ZStack {
        ForEach(0..<colors.count) {
            Rectangle()
                .fill(colors[$0])
                .frame(width: 100, height: 100)
                .offset(x: CGFloat($0) * 10.0,
                        y: CGFloat($0) * 10.0)
        }
    }
}