Contour, remplissage et superposition
Dessinez le contour et remplissez les formes pour créer des badges et des cartes.
Contour, remplissage et superposition est une leçon SwiftUI Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage SwiftUI Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours SwiftUI Academy comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
Fill vs Stroke
A shape can be painted inside with fill or outlined with stroke. Together they let you build badges and cards.
Filling a Shape
Use fill to paint the whole inside of a shape with a color or gradient. It is the most common way to color a shape. 🎨
Circle()
.fill(.blue)Outlining with stroke
The stroke modifier draws only the border of a shape, leaving the center empty. Perfect for hollow rings and outlines.
Circle()
.stroke(.blue)Controlling Line Width
Pass a lineWidth to stroke to make the outline thicker or thinner. A larger number gives a bolder border.
Circle()
.stroke(.blue, lineWidth: 4)Dashed Borders
Use a StrokeStyle with a dash pattern for dashed outlines. Great for placeholders and drop zones in your UI.
RoundedRectangle(cornerRadius: 12)
.stroke(style: StrokeStyle(lineWidth: 2, dash: [6]))Fill and Stroke Together
Want both a fill and a border? Use fill with a stroke argument to paint inside and outline in one call.
Circle()
.fill(.yellow)
.stroke(.orange, lineWidth: 3)Meet the overlay
The overlay modifier layers a view on top of another. Use it to add a border, badge, or icon over existing content.
Borders via overlay
A classic trick: fill a shape, then add a stroked copy with overlay. You get a clean filled card with a crisp border.
RoundedRectangle(cornerRadius: 12)
.fill(.white)
.overlay(
RoundedRectangle(cornerRadius: 12)
.stroke(.gray, lineWidth: 1))Overlaying an Icon
You can overlay any view, not just shapes. Drop a small badge or icon onto a card to highlight new or important items.
Circle()
.fill(.blue)
.overlay(Text("3").foregroundStyle(.white))overlay vs background
Remember the layers: overlay sits on top of a view, while background sits behind it. Pick by which side you want the decoration.
Building a Badge
Combine fill, stroke, and overlay to craft polished badges, avatars, and cards. These three tools cover most decoration. ✨
Quick Check
You want to layer a stroked border on top of a filled shape. Which modifier places a view on top?
Recap: Stroke, Fill & overlay
You learned to paint shapes with fill, outline them with stroke, and layer extras with overlay. You can now build real badges and cards!
Questions Fréquemment Posées
La leçon « Contour, remplissage et superposition » est-elle gratuite ?
Oui — le texte complet de « Contour, remplissage et superposition » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours SwiftUI Academy, passe à CoddyKit PRO. Le cours SwiftUI Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Contour, remplissage et superposition » ?
Dessinez le contour et remplissez les formes pour créer des badges et des cartes. Tu pratiques SwiftUI Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer SwiftUI Academy ?
Aucune expérience préalable n'est requise. SwiftUI Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Contour, remplissage et superposition » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon SwiftUI Academy ?
Oui. Chaque leçon SwiftUI Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Le type Color et les couleurs des ressources
- Dégradés linéaires, radiaux et angulaires
- Formes intégrées
- Contour, remplissage et superposition