SwiftUI Academy · Lektion

Werte mit Stepper erhöhen

Passen Sie Werte mit einem Stepper nach oben und unten an.

Werte mit Stepper erhöhen 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.

Meet the Stepper

A Stepper shows minus and plus buttons to nudge a value up or down. It is ideal for quantities like item counts. ➕

Stepper Holds a Number

Like Slider, a Stepper edits a number. Tapping plus increases it and tapping minus decreases it by one step.

@State private var count = 1

Bind to State

Connect the value with the dollar sign binding and give it a label. SwiftUI handles the plus and minus taps for you.

Stepper("Quantity", value: $count)

Set a Range

Pass an in range to clamp the value. The buttons disable automatically when you hit the minimum or maximum.

Stepper("Count", value: $count, in: 0...10)

Choose the Step Size

Add a step to change how much each tap moves the value, like jumping by five instead of one.

Stepper("Score", value: $count, in: 0...100, step: 5)

Show the Value

You usually want to display the current number. Interpolate it into the label so users see the count update.

Stepper("Items: \(count)", value: $count)

Custom Increment Actions

Need full control? Use the onIncrement and onDecrement closures to run your own logic on each tap.

Stepper("Adjust") {
    count += 2
} onDecrement: {
    count -= 2
}

Stepper in a Form

Drop a Stepper into a Form row for a tidy settings look, the same way Toggle and Slider fit there.

Form {
    Stepper("Servings", value: $count)
}

A Richer Label

The label can be any view via the closure form, so you can pair text with an icon for clarity.

Stepper(value: $count) {
    Label("Cups", systemImage: "cup.and.saucer")
}

React to Changes

Other views update automatically when the count changes. Here a Text repeats based on the value.

Text(String(repeating: "⭐️", count: count))

The Full View

Everything together: a clamped Stepper with a step plus a label that shows the live count.

struct CartView: View {
    @State private var count = 1
    var body: some View {
        Stepper("Qty: \(count)", value: $count, in: 1...9)
    }
}

Quick Check

What happens when a Stepper value reaches the top of its range?

Recap

A Stepper nudges a number with plus and minus, supports an in range and step, and clamps at the edges. ➕➖

Häufig gestellte Fragen

Ist die Lektion „Werte mit Stepper erhöhen“ kostenlos?

Ja — der vollständige Text von „Werte mit Stepper erhöhen“ 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 „Werte mit Stepper erhöhen“?

Passen Sie Werte mit einem Stepper nach oben und unten 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 „Werte mit Stepper erhöhen“?

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