HStack: qué es, HStack VStack ZStack en SwiftUI

¿Qué es HStack en SwiftUI?

HStack (Horizontal Stack) es un contenedor de SwiftUI que coloca las vistas hijas en una línea horizontal. Cada elemento hijo ocupa el espacio que necesita, a menos que se especifique lo contrario. HStack acepta dos parámetros obligatorios: alignment (alineación vertical, por defecto .center) y spacing (distancia entre elementos, por defecto nil — espacio del sistema). Según Apple Human Interface Guidelines (2025), HStack es la opción preferida para barras de botones, filas de entrada y listas horizontales de iconos.

HStack(alignment: .center, spacing: 16) {
    Image("star")
        .resizable()
        .frame(width: 24, height: 24)
    Text("Favoritos")
        .font(.body)
    Spacer()
    Image("chevron.right")
        .foregroundColor(.gray)
}
.padding()

En este ejemplo, HStack crea una fila de tres elementos: un icono, texto y una flecha. Spacer() separa los elementos — el icono y el texto se alinean al borde izquierdo, y la flecha al borde derecho. Alignment .center alinea los tres elementos a lo largo del eje central vertical.

VStack: diseño vertical y alineación

VStack (Vertical Stack) es un contenedor de SwiftUI para colocar elementos hijos verticalmente de arriba a abajo. Similar a HStack, acepta alignment (alineación horizontal: .leading, .center, .trailing) y spacing. VStack es la base para construir formularios, tarjetas, perfiles y listas de configuración. Según Apple Docs (2025), VStack junto con LazyVStack cubre el 85% de los escenarios de diseño vertical en SwiftUI.

VStack(alignment: .leading, spacing: 8) {
    Text("Nombre de la receta")
        .font(.headline)
    Text("Tiempo de preparación: 30 min")
        .font(.subheadline)
        .foregroundColor(.secondary)
    HStack(spacing: 4) {
        Image("star.fill")
            .foregroundColor(.yellow)
        Text("4.8")
    }
}

VStack con alignment .leading alinea todas las filas al borde izquierdo. Dentro de VStack, se anida un HStack para la calificación — este es un patrón típico para construir diseños complejos mediante stacks anidados. Spacing 8 crea un espacio uniforme entre las líneas de texto.

ZStack: superposición de elementos por profundidad

ZStack (Z-axis Stack) es un contenedor de SwiftUI para superponer vistas hijas unas sobre otras a lo largo del eje de profundidad. El primer elemento en el cuerpo de ZStack se dibuja en el fondo, el último — en el frente. ZStack se usa para imágenes de fondo con texto encima, indicadores personalizados, botones superpuestos y animaciones de transición. Según Apple Docs (2025), ZStack por defecto alinea todos los elementos al centro (alignment: .center), pero admite cualquier combinación de Alignment.

ZStack(alignment: .bottomLeading) {
    Image("mountains")
        .resizable()
        .scaledToFill()
        .frame(height: 200)
        .clipped()
    Color.black
        .opacity(0.3)
    Text("Paisaje de montaña")
        .font(.title)
        .bold()
        .foregroundColor(.white)
        .padding()
}

En este ejemplo, ZStack superpone tres capas: una imagen de montaña, un color negro semitransparente para oscurecer y un texto de título. Alignment .bottomLeading fija el texto en la esquina inferior izquierda. El oscurecimiento (Color.black.opacity(0.3)) mejora la legibilidad del texto en áreas brillantes de la imagen.

HStack vs VStack vs ZStack: cuándo usar cada uno

La elección del stack depende de la dirección del diseño: HStack — disposición horizontal (botones, filas de entrada), VStack — disposición vertical (formularios, tarjetas), ZStack — superposición (fondos, overlays). Según Apple Human Interface Guidelines (2025), para diseños complejos los stacks se anidan unos dentro de otros: un VStack externo contiene HStack y ZStack en su interior. LazyHStack y LazyVStack son versiones perezosas para colecciones grandes.

Alignment y Spacing: ajuste fino de stacks

Los parámetros alignment y spacing brindan control total sobre la posición de los elementos hijos en los stacks de SwiftUI. Alignment en HStack controla la alineación vertical de elementos de diferentes alturas. VStack alignment controla la alineación horizontal. Spacing establece la distancia entre todos los elementos hijos en el stack. Según SwiftUI Lab (2025), alignment puede ser estándar (.top, .center, .bottom) o personalizado mediante AlignmentID.

HStack(alignment: .top, spacing: 12) {
    Text("Título")
        .font(.largeTitle)
    VStack(alignment: .leading) {
        Text("Subtítulo")
        Text("Descripción con texto adicional")
            .font(.caption)
            .foregroundColor(.gray)
    }
}
.padding()

Aquí, alignment .top alinea el título grande y el VStack anidado a lo largo del borde superior. Spacing 12 crea un espacio entre ellos. El VStack anidado con alignment .leading alinea el subtítulo y la descripción al borde izquierdo. La combinación de diferentes alignments dentro de stacks anidados permite un control preciso del diseño.

Stacks anidados: ejemplos de diseños complejos

Las interfaces reales se construyen combinando HStack, VStack y ZStack anidados. Una tarjeta de producto es un ejemplo típico: un VStack externo contiene una imagen (ZStack con overlay), un título (Text), una calificación (HStack) y un precio. Según Apple Sample Projects (2025), la profundidad de anidamiento de los stacks rara vez supera los 4 niveles — un anidamiento más profundo reduce la legibilidad del código y el rendimiento.

VStack(spacing: 12) {
    ZStack(alignment: .topTrailing) {
        Image("product")
            .resizable()
            .scaledToFit()
        Text("-20%")
            .font(.caption)
            .bold()
            .foregroundColor(.white)
            .padding(6)
            .background(Color.red)
            .cornerRadius(4)
    }
    Text("Smartphone Model X")
        .font(.headline)
    HStack(spacing: 8) {
        Text("$999")
            .font(.title2)
            .bold()
        Spacer()
        Image("star.fill")
            .foregroundColor(.yellow)
        Text("4.7")
    }
}
.padding()

En este ejemplo, VStack combina un ZStack (imagen con una insignia de descuento), un nombre de producto y un HStack (precio + calificación). ZStack usa alignment .topTrailing para colocar la insignia «-20%» en la esquina superior derecha. Spacer en HStack empuja el precio al borde izquierdo y la calificación al borde derecho.