📋 Cap 10: Inventário e Pokedex (LazyColumn)

🎯 Objetivo da Aula: Ao final desta aula, você saberá exibir listas de dados no celular de forma profissional. Você aprenderá a usar a LazyColumn, que é a forma mais rápida de mostrar milhares de itens (como o feed de uma rede social) sem deixar o celular lento.

---

🏢 O Cenário Prático (Seu Desafio): Sua Pokedex está crescendo! Agora você tem uma lista com os nomes de vários Pokémons. Se você tentar desenhar cada um manualmente na tela, vai demorar horas. Seu desafio é criar uma Lista Automática que recebe os nomes e os exibe de forma organizada e rolável.

---

🧠 Fundamentos: A Teoria Traduzida

📖 Dicionário do Programador

• LazyColumn (Coluna Preguiçosa): Ela só trabalha no que é necessário! Se sua lista tem 1000 itens, mas na tela só cabem 5, ela só desenha os 5. Os outros 995 ficam esperando você rolar a tela. Isso economiza bateria e memória.
• Reciclagem: O Android reaproveita o “desenho” do item de cima para mostrar o item que está chegando embaixo.

🎨 O Padrão de Lista

Para criar uma lista, você precisa de duas coisas:

1. Uma Lista de Dados (ex: listOf("Pikachu", "Charmander")).
2. Um Template de Item (como cada linha da lista deve aparecer).

graph TD
    A["Lista de Nomes"] --> B{LazyColumn}
    B --> C["Linha 1: Pikachu"]
    B --> D["Linha 2: Charmander"]
    B --> E["Linha 3: Squirtle"]

---

📦 Imports Necessários

Antes de copiar os códigos abaixo, adicione estes imports no topo do seu arquivo .kt:

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.Card
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

---

📖 Exemplo Passo a Passo: Sua Pokedex

1. Crie a lista de nomes usando listOf.
2. Use o comando items(suaLista) dentro da LazyColumn.

@Composable
fun ListaPokedex() {
    // 1. A nossa base de dados
    val pokemons = listOf("Pikachu", "Charmander", "Squirtle", "Bulbasaur", "Mewtwo")

    // 2. A esteira rolante
    LazyColumn {
        items(pokemons) { pokemon ->
            // 3. O template de cada linha
            Text(
                text = "👾 $pokemon", 
                modifier = Modifier.padding(16.dp).fillMaxWidth(),
                fontSize = 20.sp
            )
        }
    }
}

---

🛠️ Prática Obrigatória 1: Crie uma lista de Strings chamada meusItens com pelo menos 10 nomes de itens de jogos (ex: “Poção”, “Espada”, “Escudo”). Exiba essa lista usando uma LazyColumn.

---

🛠️ Prática Obrigatória 2: Estilize seu item da lista! Coloque cada item dentro de um Card do Compose para que ele tenha uma borda e uma sombra, parecendo uma carta de baralho.

---

🔑 Gabarito Passo a Passo:

@Composable
fun MeuInventario() {
    val itens = listOf("Espada", "Escudo", "Poção", "Arco", "Cajado", "Bota", "Capa", "Anel")

    LazyColumn {
        items(itens) { item ->
            // Usando um Card para cada item
            Card(modifier = Modifier.padding(8.dp).fillMaxWidth()) {
                Text(text = "📦 $item", modifier = Modifier.padding(16.dp))
            }
        }
    }
}

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

1. Envie o código da sua LazyColumn com o uso de Card.
2. Submeta no canal de tarefas.

---

⬅️ Voltar para a Home

⬅️ Anterior Próximo ➡️