SwiftUI Academy · Pelajaran

Membangun Penghitung Ketukan

Perbarui state saat diketuk dan amati UI diperbarui.

Membangun Penghitung Ketukan adalah pelajaran SwiftUI Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar SwiftUI Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus SwiftUI Academy mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

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

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Membangun Penghitung Ketukan” gratis?

Ya — teks lengkap “Membangun Penghitung Ketukan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus SwiftUI Academy, upgrade ke CoddyKit PRO. Kursus SwiftUI Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Membangun Penghitung Ketukan”?

Perbarui state saat diketuk dan amati UI diperbarui. Kamu berlatih SwiftUI Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai SwiftUI Academy?

Tidak diperlukan pengalaman sebelumnya. SwiftUI Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Membangun Penghitung Ketukan” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran SwiftUI Academy ini?

Ya. Setiap pelajaran SwiftUI Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke SwiftUI Academy