Budowanie licznika dotknięć
Proszę aktualizować stan po dotknięciu i obserwować odświeżanie interfejsu.
Budowanie licznika dotknięć to bezpłatna lekcja SwiftUI Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej SwiftUI Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs SwiftUI Academy zawiera 4 lekcji w sumie.
Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.
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 = 0Show 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. 🎉
Często zadawane pytania
Czy lekcja „Budowanie licznika dotknięć” jest bezpłatna?
Tak — pełny tekst „Budowanie licznika dotknięć” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu SwiftUI Academy, przejdź na CoddyKit PRO. Kurs SwiftUI Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Budowanie licznika dotknięć”?
Proszę aktualizować stan po dotknięciu i obserwować odświeżanie interfejsu. Ćwiczysz SwiftUI Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć SwiftUI Academy?
Nie wymagamy żadnego doświadczenia. SwiftUI Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Budowanie licznika dotknięć”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji SwiftUI Academy?
Tak. Każda lekcja SwiftUI Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Dlaczego widoki potrzebują stanu
- Deklarowanie właściwości @State
- Budowanie licznika dotknięć
- Przełączanie widoczności za pomocą stanu