0Pricing
SwiftUI Academy · Aula

Contorno, preenchimento e sobreposição

Contorne e preencha formas para criar distintivos e cartões.

Contorno, preenchimento e sobreposição é uma aula grátis de SwiftUI Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de SwiftUI Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de SwiftUI Academy inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em 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!

Perguntas Frequentes

A aula “Contorno, preenchimento e sobreposição” é grátis?

Sim — o texto completo de “Contorno, preenchimento e sobreposição” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de SwiftUI Academy, atualize para CoddyKit PRO. O curso de SwiftUI Academy inclui 4 aulas no total.

O que vou aprender em “Contorno, preenchimento e sobreposição”?

Contorne e preencha formas para criar distintivos e cartões. Você pratica SwiftUI Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar SwiftUI Academy?

Nenhuma experiência prévia é necessária. SwiftUI Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Contorno, preenchimento e sobreposição”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de SwiftUI Academy?

Sim. Cada aula de SwiftUI Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. O tipo Color e as cores dos recursos
  2. Gradientes lineares, radiais e angulares
  3. Formas integradas
  4. Contorno, preenchimento e sobreposição
← Voltar para SwiftUI Academy