Jetpack Compose Academy · Lección

Crear un contador de toques

Conecte el estado a un botón para obtener actualizaciones en tiempo real.

Crear un contador de toques es una lección gratuita de Jetpack Compose 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 Jetpack Compose Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Jetpack Compose Academy incluye 4 lecciones en total.

Partes de esta lección aún no han sido traducidas y se muestran en inglés.

Our Goal

Let's build a tiny tap counter: a number on screen and a button that increases it with every tap. 🙂

Start With the State

First declare the state that will change. The counter starts at zero and lives inside the Composable for now.

var count by remember { mutableStateOf(0) }

Show the Count

Read the state in a Text so it always displays the current value. Reading it here subscribes the Text to changes.

Text("Count: " + count)

Add the Button

A Button needs an onClick action. Inside it we will change the state, which is what makes the UI react.

Button(onClick = { }) {
    Text("Tap me")
}

Increment on Tap

In onClick, bump the counter. Changing the state tells Compose to recompose anything that reads count.

Button(onClick = { count++ }) {
    Text("Tap me")
}

Stack Them in a Column

Place the text above the button using a Column, which lays out its children vertically, top to bottom.

Column {
    Text("Count: " + count)
    Button(onClick = { count++ }) { Text("Tap me") }
}

How the Loop Works

Tap fires onClick, count changes, Compose recomposes the Text, and you instantly see the new number. That is the full cycle.

Add a Reset Button

Want a fresh start? Add a second button whose onClick sets count back to zero. Reset is just another state change.

Button(onClick = { count = 0 }) {
    Text("Reset")
}

React to the Value

Because the UI is a function of state, you can style it from count, like showing a message once it passes ten taps.

if (count > 10) Text("Wow, keep going!")

Wrap It in a Function

Put everything in a reusable Composable named TapCounter. Now you can drop your counter anywhere in the app.

@Composable
fun TapCounter() {
    var count by remember { mutableStateOf(0) }
}

You Built Interactivity

That simple loop of state to UI to event to state is the heart of every interactive Compose screen you will ever write.

Quick Check

What makes the displayed number update after a tap?

Recap

You wired state to a Text and a Button to build a live tap counter, your first truly interactive Compose screen. Great work! 🎉

Preguntas frecuentes

¿La lección «Crear un contador de toques» es gratis?

Sí — el texto completo de «Crear un contador de toques» 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 Jetpack Compose Academy, actualiza a CoddyKit PRO. El curso de Jetpack Compose Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Crear un contador de toques»?

Conecte el estado a un botón para obtener actualizaciones en tiempo real. Practicas Jetpack Compose 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 Jetpack Compose Academy?

No se requiere experiencia previa. Jetpack Compose 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 «Crear un contador de toques»?

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 Jetpack Compose Academy?

Sí. Cada lección de Jetpack Compose 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

← Volver a Jetpack Compose Academy