SwiftUI Academy · Lektion

Hintergründe und Eckradius

Wenden Sie Farben, Farbverläufe und abgerundete Ecken an.

Hintergründe und Eckradius 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.

Adding a Background

The background modifier paints behind a view. Drop in a color and the area the view occupies fills in, instantly turning plain text into a tile.

Text("Hello")
    .background(.blue)

Pad First, Then Color

A background hugs the content tightly. Add padding before the background so the color has comfortable space around the text inside.

Text("Pill")
    .padding()
    .background(.blue)

Readable Text on Color

Dark backgrounds need light text. Pair a colored background with foregroundStyle so your label stays crisp and easy to read.

Text("Tag")
    .padding()
    .background(.indigo)
    .foregroundStyle(.white)

Rounding the Corners

Sharp corners can feel harsh. The cornerRadius modifier softens them, clipping the view into a friendly rounded rectangle.

Text("Soft")
    .padding()
    .background(.blue)
    .cornerRadius(12)

Order Makes the Shape

Corner radius rounds whatever it follows, so place it after the background. Rounding before the color would clip the text, not the tile.

Background with a Shape

For more control, pass a shape to background. A RoundedRectangle fills and rounds in one step, the modern way to build cards.

Text("Card")
    .padding()
    .background(RoundedRectangle(cornerRadius: 16).fill(.teal))

Making a Circle

A large radius on a square view yields a circle. Combine an equal frame with clipShape using Circle for round avatars and icon badges.

Text("A")
    .frame(width: 60, height: 60)
    .background(.orange)
    .clipShape(Circle())

Gradients as Backgrounds

Backgrounds are not limited to flat colors. A LinearGradient adds depth, flowing smoothly from one color to another across the view.

Text("Glow")
    .padding()
    .background(LinearGradient(colors: [.pink, .orange], startPoint: .top, endPoint: .bottom))

Materials for Depth

SwiftUI ships translucent Material backgrounds that blur whatever sits behind them, giving cards a native, frosted-glass feel.

Text("Frosted")
    .padding()
    .background(.ultraThinMaterial)

Adding a Border

Pair a background with an overlay stroke to outline a card. The rounded rectangle border traces the same corners as the fill.

Text("Bordered")
    .padding()
    .overlay(RoundedRectangle(cornerRadius: 12).stroke(.gray))

Building a Real Card

Stack these tools and a card appears: padding for room, a background for color, and a corner radius to round it into a polished tile.

Text("Done")
    .padding()
    .background(.green)
    .cornerRadius(10)

Quick Check

Make sure the modifier order clicked for you.

Recap

Awesome! You can now style views with a background, round corners, add gradients, materials, and borders to build clean, reusable cards.

Häufig gestellte Fragen

Ist die Lektion „Hintergründe und Eckradius“ kostenlos?

Ja — der vollständige Text von „Hintergründe und Eckradius“ 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 „Hintergründe und Eckradius“?

Wenden Sie Farben, Farbverläufe und abgerundete Ecken an. 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 „Hintergründe und Eckradius“?

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

← Zurück zu SwiftUI Academy