Espacement vertical

Espacement horizontal

Image de présentation d’un écran iOS illustrant les Spacer en SwiftUI.

Spacer

Les Leçons
Tips
Image de présentation d’un écran iOS illustrant les Spacer en SwiftUI.

Spacer

Le Spacer est un composant qui crée un espace entre les éléments de l’interface. Il repousse les éléments adjacents pour occuper tout l’espace disponible autour de lui.

Espacement vertical

Pour créer de l’espace vertical entre les vues, tu peux utiliser une VStack et y insérer des Spacer() pour ajuster l’espacement.


VStack {
    RoundedRectangle(cornerRadius: 10)
        .frame(width: 100, height: 100)
    Spacer()
    RoundedRectangle(cornerRadius: 10)
        .frame(width: 100, height: 100)
}
.padding()
Capture d’écran d’une app iOS montrant le placement de composants dans une VStack avec un spacer

Espacement horizontal

Pour créer de l’espace horizontal entre les vues, tu peux utiliser une HStack et y insérer des Spacer() pour ajuster l’espacement.


HStack {
    RoundedRectangle(cornerRadius: 10)
        .frame(width: 100, height: 100)
    Spacer()
    RoundedRectangle(cornerRadius: 10)
        .frame(width: 100, height: 100)
}
.padding()
Capture d’écran d’une app iOS montrant le placement de composants dans une HStack avec un Spacer
Stacks
Image(SystemeName)

Spacer

Note

Le composant Spacer est idéal pour occuper l’espace vide disponible dans ton interface en répartissant dynamiquement cet espace autour des éléments. Cependant, si tu as besoin de positionner une vue avec plus de précision, il est préférable d’utiliser le modificateur .padding(), qui te permet de définir des marges personnalisées autour d’un composant pour ajuster son espacement de manière précise.

Spacer

Note

Le composant Spacer est idéal pour occuper l’espace vide disponible dans ton interface en répartissant dynamiquement cet espace autour des éléments. Cependant, si tu as besoin de positionner une vue avec plus de précision, il est préférable d’utiliser le modificateur .padding(), qui te permet de définir des marges personnalisées autour d’un composant pour ajuster son espacement de manière précise.