0Pricing
SwiftUI Academy · Leçon

Créer un compteur de touchers

Mettez l’état à jour lors d’un toucher et observez l’actualisation de l’interface.

Créer un compteur de touchers est une leçon SwiftUI Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage SwiftUI Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours SwiftUI Academy comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

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. 🎉

Questions Fréquemment Posées

La leçon « Créer un compteur de touchers » est-elle gratuite ?

Oui — le texte complet de « Créer un compteur de touchers » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours SwiftUI Academy, passe à CoddyKit PRO. Le cours SwiftUI Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Créer un compteur de touchers » ?

Mettez l’état à jour lors d’un toucher et observez l’actualisation de l’interface. Tu pratiques SwiftUI Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer SwiftUI Academy ?

Aucune expérience préalable n'est requise. SwiftUI Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Créer un compteur de touchers » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon SwiftUI Academy ?

Oui. Chaque leçon SwiftUI Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Pourquoi les vues ont besoin d’un état
  2. Déclarer des propriétés @State
  3. Créer un compteur de touchers
  4. Afficher ou masquer avec l’état
← Retour à SwiftUI Academy