Stacks

Stacks

Les Stacks sont la base de la création de tes écrans en SwiftUI. Elles s’assemblent facilement pour concevoir des interfaces sur mesure. Prends le temps de les manipuler, tu verras, c’est intuitif à prendre en main

VStack

On commence par la VStack, qui signifie “Vertical Stack” (empilement à la verticale). Tous les composants placés entre les accolades {} de la VStack s’empilent de haut en bas.

VStack {
    Text("Bonjour")
    Text("Good morning")
    Text("Buongiorno")
}

Personalisation alignment – spacing

→ alignment Définit comment les enfants sont alignés horizontalement. Les valeurs possibles incluent .leading, .center et .trailing.  (.leading aligne les éléments à gauche du composant, tandis que .trailing les positionne à droite.)

→ spacing  Définit l’espacement entre les éléments enfants. Tu peux passer une valeur spécifique pour cet espacement.

VStack (alignment: .leading, spacing: 20){
    Text("Bonjour")
    Text("Good morning")
    Text("Buongiorno")
}

HStack

Maintenant, place à la HStack, qui signifie “Horizontal Stack” (ou empilement horizontal). Ici, les composants placés entre les accolades {} d’une HStack s’alignent naturellement à l’horizontale, de gauche à droite.

HStack{
    Text("Bonjour")
    Text("Good morning")
    Text("Buongiorno")
}

Personalisation alignment – spacing

→ alignment Définit comment les enfants sont alignés verticalement. Les valeurs possibles incluent .top, .center et .bottom. Par exemple, .top aligne les éléments en haut du composant, tandis que .bottom les positionne en bas.

→ spacing  Définit l’espacement entre les éléments enfants. Vous pouvez passer une valeur spécifique pour cet espacement.

HStack(alignment: .top, spacing: 40){
  Text("Bonjour")
  Text("Good morning")
  Text("Buongiorno")
}

ZStack

Pour finir, parlons des ZStack, où “Z” représente l’axe de profondeur. Cette stack permet de superposer les éléments les uns sur les autres.

ZStack{
  Circle()
      .frame(width: 300, height: 300)
  Circle()
      .frame(width: 50, height: 50)
      .foregroundStyle(.red)
}

Personalisation alignment 

→ alignment Permet de contrôler l’alignement des enfants dans le ZStack. Les valeurs possibles incluent .center, .top, .bottom, .leading, .trailing, et leurs combinaisons comme .topLeading

ZStack(alignment: .topLeading){
  Circle()
      .frame(width: 300, height: 300)
  Circle()
      .frame(width: 100, height: 100)
      .foregroundStyle(.red)
}