Qué es VStack

El componente VStack permite apilar vistas de forma vertical. Es un componente equivalente a UIStackView con axis vertical de UIKit.

Aquí podéis consultar la documentación oficial

Es uno de los componentes principales que usaremos para posicionar vistas en pantalla. Es muy común verlo embebido en un ScrollView, ya que es necesario si las vistas que contienen ocupan más que la propia pantalla del dispositivo en la vertical, pudiendo así realizar scroll para ver todo el contenido.

Para crear el componente solo necesitaremos embeber en su ViewBuilder las vistas que podrá mostrar:

VStack {
    Text("Hello")
    Text("World!")
}

El inicializador tiene otros parámetros que son de utilidad:

VStack(alignment: .leading, spacing: 20) {
    Text("Hello")
    Text("awesome world!")
}

• alignment: permite indicar la alineación de las vistas. Las opciones disponibles están definidas en HorizontalAlignment.
• spacing: separación entre las vistas contenidas en el stack.

También es común usar el bloque ForEach de SwiftUI para iterar sobre una colección para pintar todas las vistas que vengan desde una fuente de datos.

struct ContentView: View {
    let items = ["Sevilla", "Cádiz", "Huelva", "Córdoba", "Málaga", "Granada", "Jaén", "Álmería" ]
    var body: some View {
        ScrollView {
            VStack(alignment: .center, spacing: 20) {
                Text("Hello")
                Text("awesome world!")
                Divider()
                ForEach(items, id: .self) {
                    Text($0)
                        .font(.title2)
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
            .padding()
        }
        .background(Color.red.opacity(0.3))
    }
}

Modificadores comunes para VStack

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

Ejemplo

Puedes encontrar este ejemplo en https://github.com/SDOSLabs/SwiftUI-Test bajo el apartado VStack.

Rafael Fernández,
iOS Tech Lider