SwiftUI Academy · Leçon

Formes intégrées

Dessinez des rectangles, des cercles, des capsules et des RoundedRectangle.

Formes intégrées est une leçon SwiftUI Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.

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!

Questions Fréquemment Posées

La leçon « Formes intégrées » est-elle gratuite ?

Oui — le texte complet de « Formes intégrées » 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 « Formes intégrées » ?

Dessinez des rectangles, des cercles, des capsules et des RoundedRectangle. 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 3 sur 4.

Combien de temps prend la leçon « Formes intégrées » ?

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

← Retour à SwiftUI Academy