Criando um Contador de Toques
Ligue o estado a um botão para obter atualizações em tempo real.
Criando um Contador de Toques é uma aula grátis de Jetpack Compose Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Jetpack Compose Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Jetpack Compose Academy inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em 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! 🎉
Aprenda Kotlin com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 30
- Aulas
- 120
Perguntas Frequentes
A aula “Criando um Contador de Toques” é grátis?
Sim — o texto completo de “Criando um Contador de Toques” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Jetpack Compose Academy, atualize para CoddyKit PRO. O curso de Jetpack Compose Academy inclui 4 aulas no total.
O que vou aprender em “Criando um Contador de Toques”?
Ligue o estado a um botão para obter atualizações em tempo real. Você pratica Jetpack Compose Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Jetpack Compose Academy?
Nenhuma experiência prévia é necessária. Jetpack Compose Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Criando um Contador de Toques”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Jetpack Compose Academy?
Sim. Cada aula de Jetpack Compose Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- remember e mutableStateOf
- Recomposição: O que Aciona um Redesenho
- Criando um Contador de Toques
- rememberSaveable durante a Rotação