Integrierte Formen
Zeichnen Sie Rectangle, Circle, Capsule und RoundedRectangle.
Integrierte Formen ist eine kostenlose SwiftUI Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des SwiftUI Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der SwiftUI Academy-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
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!
Lerne Swift mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 30
- Lektionen
- 120
Häufig gestellte Fragen
Ist die Lektion „Integrierte Formen“ kostenlos?
Ja — der vollständige Text von „Integrierte Formen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des SwiftUI Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der SwiftUI Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Integrierte Formen“?
Zeichnen Sie Rectangle, Circle, Capsule und RoundedRectangle. Du übst SwiftUI Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um SwiftUI Academy zu starten?
Keine Vorkenntnisse erforderlich. SwiftUI Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Integrierte Formen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser SwiftUI Academy-Lektion Code schreiben und ausführen?
Ja. Jede SwiftUI Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Der Typ Color und Asset-Farben
- Lineare, radiale und winkelförmige Farbverläufe
- Integrierte Formen
- Kontur, Füllung und overlay