⚡ Cap 09: Vida Reativa (Estado no Compose)

🎯 Objetivo da Aula: Ao final desta aula, você entenderá o conceito de Estado. Você será capaz de criar variáveis que “avisam” a tela para se atualizar sozinha sempre que o valor mudar, permitindo criar contadores de XP e barras de vida.

---

🏢 O Cenário Prático (Seu Desafio): Até agora, suas telas são como fotos: elas não mudam. Se o jogador ganha XP, o número na tela continua parado. Seu desafio é criar a Arena de Treino: uma tela com um botão “Treinar” que, a cada clique, aumenta o XP do jogador na tela em tempo real.

---

🧠 Fundamentos: A Teoria Traduzida

📖 Dicionário do Programador

• Estado (State): É a “Memória” da tela. É o que o app está mostrando agora.
• Recomposição: É quando o Android percebe que o valor mudou e “redesenha” a tela instantaneamente para mostrar o novo número.
• remember { … }: É o comando que diz ao app: “Não esqueça esse valor se a tela piscar!”.

🎨 O Padrão de Estado

No Compose, não usamos variáveis comuns (var x = 0). Usamos uma estrutura especial para que a tela “vigie” o valor: var xp by remember { mutableStateOf(0) }

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"]

---

📖 Exemplo Passo a Passo: O Contador de XP

1. Importe as ferramentas de estado: runtime.*.
2. Crie a variável de estado dentro da função @Composable.
3. Use o comando by para facilitar a vida (exige import de getValue e setValue).

@Composable
fun TelaTreino() {
    // 1. Criando a memória da tela
    var xp by remember { mutableStateOf(0) }

    Column(modifier = Modifier.padding(20.dp)) {
        Text(text = "Seu XP Atual: $xp", fontSize = 30.sp)
        
        // 2. O botão que muda o valor
        Button(onClick = { xp += 10 }) {
            Text("Treinar (+10 XP)")
        }
    }
}

---

🛠️ Prática Obrigatória 1: Crie uma variável de estado chamada vidaInimigo começando com 100. Crie um botão “Atacar” que subtraia 5 da vida a cada clique. Mostre a vida na tela.

---

🛠️ Prática Obrigatória 2: Adicione um if: Se a vida do inimigo for menor ou igual a zero, o texto na tela deve mudar de “Inimigo Ativo” para “🏆 INIMIGO DERROTADO!”.

---

🔑 Gabarito Passo a Passo:

@Composable
fun ArenaBatalha() {
    var vidaInimigo by remember { mutableStateOf(100) }

    Column {
        if (vidaInimigo > 0) {
            Text("Vida do Boss: $vidaInimigo")
            Button(onClick = { vidaInimigo -= 5 }) {
                Text("Atacar!")
            }
        } else {
            Text("🏆 INIMIGO DERROTADO!", color = Color.Green)
        }
    }
}

📤 Instruções de Entrega (Microsoft Teams):

1. Envie o código da sua tela de Arena.
2. Nomeie como: Gamer_SeuNome_Cap09.kt.
3. Submeta no canal de tarefas.

---

⬅️ Voltar para a Home

⬅️ Anterior Próximo ➡️