Trazo, relleno y overlay
Dibuje el contorno y rellene formas para crear insignias y tarjetas.
Trazo, relleno y overlay es una lección gratuita de SwiftUI Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de SwiftUI Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de SwiftUI Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
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!
Preguntas frecuentes
¿La lección «Trazo, relleno y overlay» es gratis?
Sí — el texto completo de «Trazo, relleno y overlay» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de SwiftUI Academy, actualiza a CoddyKit PRO. El curso de SwiftUI Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Trazo, relleno y overlay»?
Dibuje el contorno y rellene formas para crear insignias y tarjetas. Practicas SwiftUI Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar SwiftUI Academy?
No se requiere experiencia previa. SwiftUI Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Trazo, relleno y overlay»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de SwiftUI Academy?
Sí. Cada lección de SwiftUI Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- El tipo Color y los colores de recursos
- Degradados lineales, radiales y angulares
- Formas integradas
- Trazo, relleno y overlay