📊 Slides: Cap 09 — Vida Reativa (Estado no Compose)

📖 Ver Cap 09 completo

Resumo visual da aula, em blocos — use como roteiro de revisão ou apresentação.

---

🟦 Slide 1: Objetivo da Aula

• Entender o conceito de Estado (State).
• Criar variáveis que fazem a tela se atualizar sozinha.
• Montar a Arena de Treino: XP e vida reagindo a cliques.

---

🟦 Slide 2: O Cenário Prático

Até agora, as telas são como fotos: não mudam. Crie a Arena de Treino: um botão “Treinar” que, a cada clique, aumenta o XP na tela em tempo real.

---

🟦 Slide 3: Dicionário do Programador

Termo	Significado
Estado (State)	A “memória” da tela — o que ela está mostrando agora
Recomposição	Quando o Compose percebe a mudança e redesenha a tela
remember { … }	“Não esqueça esse valor se a tela piscar!”

🎨 Padrão de Estado:

var xp by remember { mutableStateOf(0) }

---

🟦 Slide 4: Do Clique à Tela Atualizada

graph LR
    A["Clique no Botão"] --> B["Altera o Estado: xp = 10"]
    B --> C["Compose percebe a mudança"]
    C --> D["Recomposição: Tela atualiza o texto"]

---

🟦 Slide 5: Exemplo — Contador de XP

@Composable
fun TelaTreino() {
    var xp by remember { mutableStateOf(0) }

    Column(modifier = Modifier.padding(20.dp)) {
        Text(text = "Seu XP Atual: $xp", fontSize = 30.sp)

        Button(onClick = { xp += 10 }) {
            Text("Treinar (+10 XP)")
        }
    }
}

---

🟦 Slide 6: Prática e Próximos Passos

• 🛠️ Prática 1: vidaInimigo com botão “Atacar” (-5 por clique).
• 🛠️ Prática 2: if trocando o texto para “🏆 INIMIGO DERROTADO!”.
• 💪 Exercício extra: botão de cura com limite máximo.
• 🧠 Quiz: teste seus conhecimentos.
• ➡️ Próximo capítulo: Cap 10 — Inventário e Pokedex (LazyColumn).

---

⬅️ Voltar para Slides

⬅️ Anterior Próximo ➡️