Guia de exercícios do Jetpack Compose

O Jetpack Compose usa Kotlin para implementar uma abordagem de UI declarativa, semelhante ao React Native, Flutter e Swift UI. Este guia o guiará pela criação do seu primeiro aplicativo Android usando o Jetpack Compose.

---

1. Criando um novo projeto

• Abra o Android Studio.
• Selecione o modelo Empty Activity (símbolo do Jetpack Compose).
• Preencha os detalhes do projeto:
• Nome: Placar Digital
• Nome do pacote: Conforme sua preferência.

---

2. Configurando recursos de compilação

No arquivo build.gradle do seu módulo de aplicativo:

• Habilitar o Compose:

buildFeatures {
compose true
}

• Adicionar opções do Compose:

composeOptions {
kotlinCompilerExtensionVersion 'x.x.x'
}

• Dependências: Garanta que as bibliotecas necessárias do Compose estejam incluídas.

---

3. Entendendo a MainActivity

A MainActivity inclui o método setContent:

• Inicia a IU com um tema.
• Chama um componente personalizado Greeting, anotado com @Composable.

Exemplo de componente Greeting:

@Composable
fun Greeting(message: String) {
Text(text = message)
}

Visualizar com a anotação @Preview:

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
Greeting("Olá, Compose!")
}

---

4. Usando linhas e colunas

• Linha e coluna: Adicione componentes à tela usando Linha e Coluna.

Exemplo:

Coluna(
modifier = Modifier.fillMaxWidth().padding(16.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text("Exemplo de coluna")
}

• Modificador: Usado para definir preenchimento, plano de fundo e alinhamento.

---

5. Gerenciando o estado

• Use mutableStateOf para o estado do componente interno.
• Lembre-se de valores com remember:

var score by remember { mutableStateOf(0) }

Exemplo: Criando uma visualização de pontuação

Crie uma função composable para a visualização de pontuação:

@Composable
fun ScoreView(teamName: String, score: Int, onScoreChange: (Int) -> Unit) {
Column(
modifier = Modifier.fillMaxWidth().padding(8.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(teamName)
Row {
Button(onClick = { onScoreChange(score - 1) }) {
Text("-")
}
Text("$score")
Button(onClick = { onScoreChange(score + 1) }) {
Text("+")
}
}
}
}

---

6. Implementação de classe

Crie uma classe Score para gerenciamento de dados:

data class Score(
val teamName: String,
val score: MutableState<Int>
)

---

7. Teste e refinamento

• Atualize @Preview e MainActivity para usar a classe Score.
• Teste o aplicativo e modifique os elementos da IU para explorar os recursos.

---