HStack: cos'è, HStack VStack ZStack in SwiftUI

Cos'è HStack in SwiftUI?

HStack (Horizontal Stack) è un contenitore SwiftUI che dispone le viste figlie in una linea orizzontale. Ogni elemento figlio occupa lo spazio di cui ha bisogno, salvo diversa indicazione. HStack accetta due parametri obbligatori: alignment (allineamento verticale, default .center) e spacing (distanza tra elementi, default nil — spaziatura di sistema). Secondo Apple Human Interface Guidelines (2025), HStack è la scelta preferita per barre di pulsanti, righe di input e elenchi orizzontali di icone.

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

In questo esempio, HStack crea una riga di tre elementi: un'icona, del testo e una freccia. Spacer() separa gli elementi — l'icona e il testo si allineano al bordo sinistro e la freccia al bordo destro. Alignment .center allinea tutti e tre gli elementi lungo l'asse centrale verticale.

VStack: layout verticale e allineamento

VStack (Vertical Stack) è un contenitore SwiftUI per disporre gli elementi figli verticalmente dall'alto verso il basso. Simile a HStack, accetta alignment (allineamento orizzontale: .leading, .center, .trailing) e spacing. VStack è la base per costruire moduli, carte, profili e elenchi di impostazioni. Secondo Apple Docs (2025), VStack insieme a LazyVStack copre l'85% degli scenari di layout verticale in SwiftUI.

VStack(alignment: .leading, spacing: 8) {
    Text("Nome ricetta")
        .font(.headline)
    Text("Tempo di preparazione: 30 min")
        .font(.subheadline)
        .foregroundColor(.secondary)
    HStack(spacing: 4) {
        Image("star.fill")
            .foregroundColor(.yellow)
        Text("4.8")
    }
}

VStack con alignment .leading allinea tutte le righe al bordo sinistro. All'interno del VStack, un HStack è annidato per la valutazione — questo è un modello tipico per costruire layout complessi attraverso stack annidati. Spacing 8 crea una spaziatura uniforme tra le righe di testo.

ZStack: sovrapposizione di elementi per profondità

ZStack (Z-axis Stack) è un contenitore SwiftUI per sovrapporre viste figlie l'una sull'altra lungo l'asse di profondità. Il primo elemento nel corpo dello ZStack viene disegnato sullo sfondo, l'ultimo — in primo piano. ZStack viene utilizzato per immagini di sfondo con testo sovrapposto, indicatori personalizzati, pulsanti overlay e animazioni di transizione. Secondo Apple Docs (2025), ZStack per impostazione predefinita allinea tutti gli elementi al centro (alignment: .center) ma supporta qualsiasi combinazione di Alignment.

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

In questo esempio, ZStack sovrappone tre strati: un'immagine di montagna, un colore nero semitrasparente per oscurare e un testo del titolo. Alignment .bottomLeading fissa il testo nell'angolo inferiore sinistro. L'oscuramento (Color.black.opacity(0.3)) migliora la leggibilità del testo sulle aree luminose dell'immagine.

HStack vs VStack vs ZStack: quando usare ciascuno

La scelta dello stack dipende dalla direzione del layout: HStack — disposizione orizzontale (pulsanti, righe di input), VStack — disposizione verticale (moduli, carte), ZStack — sovrapposizione (sfondi, overlay). Secondo Apple Human Interface Guidelines (2025), per layout complessi gli stack sono annidati l'uno dentro l'altro: un VStack esterno contiene HStack e ZStack all'interno. LazyHStack e LazyVStack sono versioni lazy per grandi collezioni.

Alignment e Spacing: regolazione fine degli stack

I parametri alignment e spacing danno il controllo completo sul posizionamento degli elementi figli negli stack SwiftUI. Alignment in HStack controlla l'allineamento verticale di elementi di diverse altezze. VStack alignment controlla l'allineamento orizzontale. Spacing imposta la distanza tra tutti gli elementi figli nello stack. Secondo SwiftUI Lab (2025), alignment può essere standard (.top, .center, .bottom) o personalizzato tramite AlignmentID.

HStack(alignment: .top, spacing: 12) {
    Text("Titolo")
        .font(.largeTitle)
    VStack(alignment: .leading) {
        Text("Sottotitolo")
        Text("Descrizione con testo aggiuntivo")
            .font(.caption)
            .foregroundColor(.gray)
    }
}
.padding()

Qui, alignment .top allinea il titolo grande e il VStack annidato lungo il bordo superiore. Spacing 12 crea una spaziatura tra di loro. Il VStack annidato con alignment .leading allinea il sottotitolo e la descrizione al bordo sinistro. La combinazione di diversi alignment all'interno di stack annidati consente un controllo preciso del layout.

Stack annidati: esempi di layout complessi

Le interfacce reali sono costruite combinando HStack, VStack e ZStack annidati. Una scheda prodotto è un esempio tipico: un VStack esterno contiene un'immagine (ZStack con overlay), un titolo (Text), una valutazione (HStack) e un prezzo. Secondo Apple Sample Projects (2025), la profondità di annidamento degli stack raramente supera i 4 livelli — un annidamento più profondo riduce la leggibilità del codice e le prestazioni.

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()

In questo esempio, VStack combina uno ZStack (immagine con un badge di sconto), un nome prodotto e un HStack (prezzo + valutazione). ZStack usa alignment .topTrailing per posizionare il badge «-20%» nell'angolo superiore destro. Spacer nell'HStack spinge il prezzo al bordo sinistro e la valutazione al bordo destro.