Spacer et ZStack
Fait partie de la section Introduction à SwiftUI du Journey Swift de Coddy. Leçon 12 sur 50.
Un Spacer occupe tout l’espace libre dans une pile. Dans un HStack, il pousse les vues qui le précèdent vers la gauche et celles qui le suivent vers la droite :
HStack {
Text("Total")
Spacer()
Text("$12.50")
}Dans une VStack, un Spacer écarte les vues verticalement.
ZStack superpose les vues les unes sur les autres. La première vue se trouve à l’arrière et chacune des suivantes est placée par-dessus :
ZStack {
Color.blue
Text("On top")
.foregroundStyle(.white)
}Color.blue utilisé comme vue remplit tout l’espace qui lui est attribué ; il devient donc ici un arrière-plan bleu derrière le texte.
Défi
FacileFaites en sorte que la ligne du total s’étende sur toute la largeur : ajoutez un Spacer entre Total et $12.50 afin de repousser le prix vers le bord droit.
Essayez vous-même
import SwiftUI
@main
struct CoddyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
Testez-vousCette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.
Toutes les leçons de Introduction à SwiftUI
4Modificateurs
Marge intérieureArrière-plansOrdre des modificateursCadres et formesRécapitulatif - Créateur de badges
2Afficher du contenu
Vues de texteNombres dans le textePolicesCouleursSymboles SFRécapitulatif - Étiquette de prix5État et boutons
BoutonsLa propriété @StateÉtat vrai ou fauxVues conditionnellesRécapitulatif - Compteur de score3Piles et mise en page
VStackHStackAlignement et espacementSpacer et ZStackRécapitulatif - Carte météoEntraînez-vous par vous-même : Playground Swift