Creación de un contador de pulsaciones
Actualice el estado al pulsar y observe cómo se actualiza la interfaz.
Creación de un contador de pulsaciones es una lección gratuita de SwiftUI Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de SwiftUI Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de SwiftUI Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
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. 🎉
Aprende Swift con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 30
- Lecciones
- 120
Preguntas frecuentes
¿La lección «Creación de un contador de pulsaciones» es gratis?
Sí — el texto completo de «Creación de un contador de pulsaciones» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de SwiftUI Academy, actualiza a CoddyKit PRO. El curso de SwiftUI Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Creación de un contador de pulsaciones»?
Actualice el estado al pulsar y observe cómo se actualiza la interfaz. Practicas SwiftUI Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar SwiftUI Academy?
No se requiere experiencia previa. SwiftUI Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Creación de un contador de pulsaciones»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de SwiftUI Academy?
Sí. Cada lección de SwiftUI Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Por qué las vistas necesitan estado
- Declaración de propiedades @State
- Creación de un contador de pulsaciones
- Alternar la visibilidad con el estado