SwiftUI Academy · Lektion

Buttons gestalten

Wenden Sie integrierte Button-Stile und individuelle Darstellungen an.

Buttons gestalten ist eine kostenlose SwiftUI Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.

Default Looks Are Fine

SwiftUI gives every button a sensible default style for the platform. But you can reshape its look in seconds with a single modifier. 🎨

The buttonStyle Modifier

Apply a built-in look with the buttonStyle modifier. It changes the whole appearance without you touching the label or action.

Button("Save") { save() }
    .buttonStyle(.bordered)

Bordered for Soft Buttons

The .bordered style draws a soft, tinted capsule around your label. It is great for secondary actions that should look calm.

Button("Cancel") { dismiss() }
    .buttonStyle(.bordered)

Prominent for the Main Action

Use .borderedProminent to make the primary action pop with a filled background. Reserve it for the one button that matters most.

Button("Continue") { next() }
    .buttonStyle(.borderedProminent)

Tinting a Button

Set the accent color of a styled button with the tint modifier. It changes the fill or border to match your brand.

Button("Delete") { remove() }
    .buttonStyle(.borderedProminent)
    .tint(.red)

Controlling Size

The controlSize modifier scales a button between mini, small, regular, and large, so it fits the importance of the action.

Button("Go") { go() }
    .buttonStyle(.bordered)
    .controlSize(.large)

Rounding the Corners

Want a different shape? Pair a style with buttonBorderShape to switch between capsule, rounded rectangle, and more.

Button("Join") { join() }
    .buttonStyle(.bordered)
    .buttonBorderShape(.capsule)

Styling the Label Yourself

For full control, style the label view directly with padding, background, and color, just like any other SwiftUI view.

Button("Buy") { buy() }
    .padding()
    .background(.blue)
    .foregroundStyle(.white)

Order of Modifiers

Modifier order matters. Padding before background gives roomy color; background before padding leaves an outer margin instead.

Plain and Borderless

For a text-only look with no chrome, reach for the .plain style. It strips decoration so only your label shows.

Button("Skip") { skip() }
    .buttonStyle(.plain)

Keep It Consistent

Pick a few styles and reuse them across your app. Consistency helps people instantly know what is tappable and what is primary.

Quick Check

Time to test your styling instincts.

Recap

Great job! Use buttonStyle for built-in looks, tint and controlSize to refine them, or style the label directly for full control. 🎨

Häufig gestellte Fragen

Ist die Lektion „Buttons gestalten“ kostenlos?

Ja — der vollständige Text von „Buttons gestalten“ 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 „Buttons gestalten“?

Wenden Sie integrierte Button-Stile und individuelle Darstellungen 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 2 von 4.

Wie lange dauert die Lektion „Buttons gestalten“?

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