SwiftUI Academy · Aula

Formas integradas

Desenhe Rectangle, Circle, Capsule e RoundedRectangle.

Formas integradas é uma aula grátis de SwiftUI Academy no CoddyKit. Esta é a aula 3 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.

Shapes Are Views

SwiftUI gives you ready-made shapes you can drop in like any view. They draw themselves and fill the space you give them. 🔷

The Rectangle

A Rectangle is the simplest shape: a plain box. It expands to fill whatever frame or container holds it.

Rectangle()
    .fill(.blue)
    .frame(width: 120, height: 60)

The Circle

A Circle always draws a perfect round shape inside its frame. Give it a square frame for a clean, even circle.

Circle()
    .fill(.green)
    .frame(width: 80, height: 80)

The Capsule

A Capsule is a pill shape with fully rounded ends. It is the go-to look for tags, chips, and buttons.

Capsule()
    .fill(.orange)
    .frame(width: 120, height: 44)

RoundedRectangle

A RoundedRectangle is a box with softened corners. Set its corner radius to control how round those corners look.

RoundedRectangle(cornerRadius: 16)
    .fill(.purple)

Filling a Shape

Use fill to paint a shape with a solid color or even a gradient. Without a fill, a shape draws in the default style.

Circle()
    .fill(Color.pink.gradient)

Sizing with frame

Shapes have no natural size, so wrap them in a frame to set width and height. The shape grows to fit it.

Rectangle()
    .frame(width: 100, height: 100)

Ellipse for Ovals

An Ellipse stretches a circle to match its frame. In a wide frame it becomes a smooth oval rather than a round circle.

Ellipse()
    .fill(.teal)
    .frame(width: 140, height: 70)

Shapes as Backgrounds

Place a shape behind content with the background modifier to build cards and badges. Content sits neatly on top.

Text("New")
    .padding(8)
    .background(Capsule().fill(.red))

Clipping to a Shape

Use clipShape to crop an image or view into a shape. A square photo becomes a perfect round avatar.

Image("avatar")
    .clipShape(Circle())

Shapes Build UI

Combined with fills and frames, these shapes become buttons, cards, badges, and avatars. They are your visual toolkit. ✨

Quick Check

You want a pill-shaped tag with fully rounded ends. Which shape fits best?

Recap: Built-in Shapes

You can now draw Rectangle, Circle, Capsule, RoundedRectangle, and Ellipse, then fill and size them. Great progress!

Perguntas Frequentes

A aula “Formas integradas” é grátis?

Sim — o texto completo de “Formas integradas” é 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 “Formas integradas”?

Desenhe Rectangle, Circle, Capsule e RoundedRectangle. 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 3 de 4.

Quanto tempo leva a aula “Formas integradas”?

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

← Voltar para SwiftUI Academy