Layout: stacks, grids y espaciado

Todo diseño de interfaz es, en el fondo, colocar cosas: en fila, en columna, encima. SwiftUI lo resuelve con contenedores simples que se combinan. Domina cuatro o cinco y podrás construir casi cualquier pantalla.

Los tres stacks

VStack {
    Text("Arriba")
    Text("Abajo")
}

HStack {
    Image(systemName: "star")
    Text("Al lado")
}

ZStack {
    Color.blue                     // fondo
    Text("Encima").foregroundStyle(.white)
}

Espaciado y Spacer

Cada stack acepta spacing para separar sus hijos. Y Spacer() es un elemento elástico que empuja el resto:

VStack(spacing: 20) {          // 20 puntos entre elementos
    Text("Título")
    Text("Subtítulo")
}

HStack {
    Text("Izquierda")
    Spacer()                   // empuja hacia los extremos
    Text("Derecha")
}

Alignment

Cada stack alinea sus hijos en el eje perpendicular. Un VStack alinea en horizontal:

VStack(alignment: .leading) {   // .leading, .center, .trailing
    Text("Alineado")
    Text("a la izquierda")
}

HStack(alignment: .top) {        // .top, .center, .bottom
    Text("Arriba")
    Text("del todo")
}

Grid

Para rejillas de filas y columnas alineadas, Grid (iOS 16+):

Grid {
    GridRow {
        Text("Nombre"); Text("Ana")
    }
    GridRow {
        Text("Edad"); Text("30")
    }
}

Para colecciones que se desplazan, usarás LazyVGrid / LazyHGrid (cargan solo lo visible), que verás con las listas.

frame: controlar el tamaño

Por defecto, una vista ocupa lo que necesita. frame te deja fijar tamaños o pedir que se expanda:

Text("Botón")
    .frame(maxWidth: .infinity)      // ocupa todo el ancho disponible
    .frame(height: 50)
    .background(.blue)

maxWidth: .infinity es el truco para que un elemento se estire hasta llenar su contenedor — habitual en botones a ancho completo.