HStack : qu'est-ce que c'est, HStack VStack ZStack dans SwiftUI

Qu'est-ce que HStack dans SwiftUI ?

HStack (Horizontal Stack) est un conteneur SwiftUI qui dispose les vues enfants en une ligne horizontale. Chaque élément enfant prend l'espace dont il a besoin, sauf indication contraire. HStack accepte deux paramètres obligatoires : alignment (alignement vertical, par défaut .center) et spacing (distance entre les éléments, par défaut nil — espacement système). Selon Apple Human Interface Guidelines (2025), HStack est le choix privilégié pour les barres de boutons, les lignes de saisie et les listes horizontales d'icônes.

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

Dans cet exemple, HStack crée une rangée de trois éléments : une icône, du texte et une flèche. Spacer() écarte les éléments — l'icône et le texte sont alignés à gauche, et la flèche à droite. Alignment .center aligne les trois éléments le long de l'axe central vertical.

VStack : disposition verticale et alignement

VStack (Vertical Stack) est un conteneur SwiftUI pour disposer les éléments enfants verticalement de haut en bas. Similaire à HStack, il accepte alignment (alignement horizontal : .leading, .center, .trailing) et spacing. VStack est la base pour construire des formulaires, des cartes, des profils et des listes de paramètres. Selon Apple Docs (2025), VStack associé à LazyVStack couvre 85% des scénarios de disposition verticale dans SwiftUI.

VStack(alignment: .leading, spacing: 8) {
    Text("Nom de la recette")
        .font(.headline)
    Text("Temps de préparation : 30 min")
        .font(.subheadline)
        .foregroundColor(.secondary)
    HStack(spacing: 4) {
        Image("star.fill")
            .foregroundColor(.yellow)
        Text("4.8")
    }
}

VStack avec alignment .leading aligne toutes les lignes à gauche. À l'intérieur du VStack, un HStack est imbriqué pour l'évaluation — c'est un modèle typique pour construire des dispositions complexes via des stacks imbriqués. Spacing 8 crée un espacement uniforme entre les lignes de texte.

ZStack : superposition d'éléments par profondeur

ZStack (Z-axis Stack) est un conteneur SwiftUI pour superposer les vues enfants les unes sur les autres le long de l'axe de profondeur. Le premier élément dans le corps du ZStack est dessiné à l'arrière-plan, le dernier — au premier plan. ZStack est utilisé pour les images d'arrière-plan avec du texte par-dessus, les indicateurs personnalisés, les boutons en superposition et les animations de transition. Selon Apple Docs (2025), ZStack par défaut aligne tous les éléments au centre (alignment: .center) mais prend en charge toutes les combinaisons d'Alignment.

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

Dans cet exemple, ZStack superpose trois couches : une image de montagne, une couleur noire semi-transparente pour assombrir et un texte de titre. Alignment .bottomLeading fixe le texte dans le coin inférieur gauche. L'assombrissement (Color.black.opacity(0.3)) améliore la lisibilité du texte sur les zones claires de l'image.

HStack vs VStack vs ZStack : quand utiliser chacun

Le choix du stack dépend de la direction de la disposition : HStack — disposition horizontale (boutons, lignes de saisie), VStack — disposition verticale (formulaires, cartes), ZStack — superposition (arrière-plans, overlays). Selon Apple Human Interface Guidelines (2025), pour les dispositions complexes, les stacks sont imbriqués les uns dans les autres : un VStack externe contient HStack et ZStack à l'intérieur. LazyHStack et LazyVStack sont des versions paresseuses pour les grandes collections.

Alignment et Spacing : réglage fin des stacks

Les paramètres alignment et spacing donnent un contrôle total sur le positionnement des éléments enfants dans les stacks SwiftUI. Alignment dans HStack contrôle l'alignement vertical des éléments de différentes hauteurs. VStack alignment contrôle l'alignement horizontal. Spacing définit la distance entre tous les éléments enfants dans le stack. Selon SwiftUI Lab (2025), alignment peut être standard (.top, .center, .bottom) ou personnalisé via AlignmentID.

HStack(alignment: .top, spacing: 12) {
    Text("Titre")
        .font(.largeTitle)
    VStack(alignment: .leading) {
        Text("Sous-titre")
        Text("Description avec texte supplémentaire")
            .font(.caption)
            .foregroundColor(.gray)
    }
}
.padding()

Ici, alignment .top aligne le grand titre et le VStack imbriqué le long du bord supérieur. Spacing 12 crée un espace entre eux. Le VStack imbriqué avec alignment .leading aligne le sous-titre et la description à gauche. La combinaison de différents alignments dans des stacks imbriqués permet un contrôle précis de la disposition.

Stacks imbriqués : exemples de constructions complexes

Les interfaces réelles sont construites en combinant des HStack, VStack et ZStack imbriqués. Une carte produit est un exemple typique : un VStack externe contient une image (ZStack avec overlay), un titre (Text), une évaluation (HStack) et un prix. Selon Apple Sample Projects (2025), la profondeur d'imbrication des stacks dépasse rarement 4 niveaux — une imbrication plus profonde réduit la lisibilité du code et les performances.

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

Dans cet exemple, VStack combine un ZStack (image avec un badge de réduction), un nom de produit et un HStack (prix + évaluation). ZStack utilise alignment .topTrailing pour placer le badge « -20% » dans le coin supérieur droit. Spacer dans HStack pousse le prix à gauche et l'évaluation à droite.