SwiftUI Academy · Lektion

Einen Tippzähler erstellen

Aktualisieren Sie den State beim Antippen und beobachten Sie, wie sich die UI erneuert.

Einen Tippzähler erstellen 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.

The Goal: A Live Counter

Let's build a button that counts your taps and shows the total on screen. It is the classic first taste of reactive state. 👆

Start with State

Begin with a single @State property to hold the running total. We name it count and start it at zero.

@State private var count = 0

Show the Count

Display the value with a Text view. Using string interpolation, the label always mirrors the current count.

Text("Taps: \(count)")

Add the Button

Place a Button whose action increases the count by one. The closure runs each time you tap it.

Button("Tap me") {
    count += 1
}

Stack Them Together

Group the label and button in a VStack so they sit neatly one above the other. Now you have a complete tiny screen.

VStack {
    Text("Taps: \(count)")
    Button("Tap me") { count += 1 }
}

Watch the Loop

Tap, count changes, SwiftUI re-runs body, the Text updates. This tight cycle is the heart of every reactive SwiftUI screen.

The Full View

Here is everything wired together: state, a label, and a button living inside one view.

struct CounterView: View {
    @State private var count = 0
    var body: some View {
        VStack {
            Text("Taps: \(count)")
            Button("Tap me") { count += 1 }
        }
    }
}

Add a Reset

A second button can set count back to zero. Resetting state is just another assignment, and the UI follows instantly.

Button("Reset") { count = 0 }

Format the Label

You can pluralize or style the text based on count. The label is a function of state, so any logic you add stays in sync.

Text(count == 1 ? "1 tap" : "\(count) taps")

Decrement Too

Add a minus button to count down. Just remember to keep the value sensible, for example never letting it drop below zero.

Button("-") { if count > 0 { count -= 1 } }

No Manual Refresh

Notice you never call any refresh method. Changing count is all it takes; SwiftUI handles the redraw for you every single time.

Quick Check

In the tap counter, what makes the Text update after a tap?

Recap

You built a tap counter with one @State value, a Text that reads it, and a Button that mutates it. Change the data and the UI updates itself. 🎉

Häufig gestellte Fragen

Ist die Lektion „Einen Tippzähler erstellen“ kostenlos?

Ja — der vollständige Text von „Einen Tippzähler erstellen“ 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 „Einen Tippzähler erstellen“?

Aktualisieren Sie den State beim Antippen und beobachten Sie, wie sich die UI erneuert. 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 „Einen Tippzähler erstellen“?

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