SwiftUI #4: Contenedores básicos: VStack, HStack, ZStack, Group

#swift #swiftui #ios #vstack

(-)Stack

En SwiftUI podemos agrupar elementos de una pila de forma horizontal, vertical, o uno sobre otro. Para esto se usan los componentes HStack, VStack y ZStack respectivamente, que reciben un conjunto de componentes visuales en una función @ViewBuilder, y los pinta a todos de una sola vez, independiente de que esté en o fuera de la pantalla.
Se sugiere usar este tipo de pilas de vistas cuando se tenga un número pequeño de subvistas o no se quiera retrasar el pintado con la versión "perezosa" de los contenedores.
Las pilas de vistas (sin importar la dirección) reciben por constructor:

alignment: La guía de alineación de subvistas en el stack. Para el VStack será de tipo HorizontalAlignment, para el HStack será VerticalAlignment y para ZStack será Alignment.
spacing: La distancia entre subvistas adyacentes o nil si se quiere que el stack ponga la distancia por defecto entre un par de subvistas.
content: Un ViewBuilder que crea el contenido del stack.

VStack

Alinea los componentes en dirección vertical.

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

HStack

Alinea los componentes en dirección horizontal.

ZStack

Partiendo de que la dirección Z es perpendicular al plano de la pantalla, el ZStack apila elementos uno sobre otro. Items "arriba" del closure aparecerán "más abajo" en el stack view. Sería como poner la primera vista sobre la superficie de la pantalla, luego apilar la siguiente vista encima y así sucesivamente.