Arrière-plans
Fait partie de la section Introduction à SwiftUI du Journey Swift de Coddy. Leçon 15 sur 50.
.background dessine une couleur derrière une vue. Elle couvre la zone de la vue, donc les marges intérieures rendent la zone colorée plus grande que le texte :
Text("New")
.padding()
.background(.red)
.foregroundStyle(.white)Pour arrondir les coins de la zone colorée, découpez-la selon une forme avec .clipShape. RoundedRectangle(cornerRadius: 8) donne des coins arrondis, tandis que Capsule() arrondit complètement les extrémités :
Text("Tag")
.padding(8)
.background(.blue)
.clipShape(RoundedRectangle(cornerRadius: 8))
Défi
FacileTransforme le texte en badge : ajoute le remplissage standard, un arrière-plan rouge et des lettres blanches.
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 scoreEntraînez-vous par vous-même : Playground Swift