Qué es HStack

El componente HStack permite apilar vistas de forma horizontal. Es un componente equivalente a UIStackView con axis horizontal 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 horizontal, pudiendo así realizar scroll para ver todo el contenido.

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

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

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

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

• alignment: permite indicar la alineación de las vistas. Las opciones disponibles están definidas en VerticalAlignment.
• 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(.horizontal) {
            HStack(alignment: .center) {
                Text("Hello")
                Text("awesome world!")
                Divider()
                    .frame(height: 50)
                ForEach(items, id: .self) {
                    Text($0)
                        .font(.body)
                        .padding(.all, 5)
                        .background(Color.black)
                        .foregroundColor(.white)
                }
            }
            .padding()
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
        .background(Color.red.opacity(0.3))
    }
}

Modificadores comunes para HStack

El componente HStack 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 HStack.

Rafael Fernández,
iOS Tech Lider