📚 Tópicos 📊 Sumário de Slides

📊 Capítulo 07: Modifiers & Custom Layouts

Especialização em Mobile Nativo Android

---

🗺️ A Ordem de Encadeamento dos Modifiers Importa!

flowchart LR
    subgraph CASO_A ["Caso A: padding DEPOIS do background"]
        A1["Modifier.size(100.dp)"] --> A2[".background(Color.Red)"] --> A3[".padding(16.dp)"]
        A_RES["Resultado: O fundo vermelho preenche TODOS os 100dp!"]
    end

    subgraph CASO_B ["Caso B: padding ANTES do background"]
        B1["Modifier.size(100.dp)"] --> B2[".padding(16.dp)"] --> B3[".background(Color.Red)"]
        B_RES["Resultado: O fundo vermelho preenche apenas a área interna (68dp)!"]
    end

    CASO_A -.-> A_RES
    CASO_B -.-> B_RES

    style CASO_A fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style CASO_B fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style A_RES fill:#e8f5e9,stroke:#4caf50,stroke-width:1.5px
    style B_RES fill:#ffebee,stroke:#d32f2f,stroke-width:1.5px

---

🎯 Slide 1: A Regra de Ouro dos Modifiers

• Os Modifiers são aplicados de cima para baixo (da esquerda para a direita no encadeamento de métodos).

• Cada modifier envolve o elemento anterior em um nó de layout decorator.

---

🎯 Slide 2: Modifiers de Interação e Acessibilidade

• Modifier.clickable: Adiciona suporte a toque com feedback tátil e efeito cascata (Ripple Effect) Material Design nativo.

• Modifier.semantics: Adiciona rótulos para leitores de tela como o TalkBack do Google.

---

🎯 Slide 3: Criando um Layout Customizado

@Composable
fun MinhaCascata(content: @Composable () -> Unit) {
    Layout(content = content) { measurables, constraints ->
        val placeables = measurables.map { it.measure(constraints) }
        layout(constraints.maxWidth, constraints.maxHeight) {
            var yPosition = 0
            placeables.forEach { placeable ->
                placeable.placeRelative(x = 0, y = yPosition)
                yPosition += placeable.height
            }
        }
    }
}

---

🔗 Navegação do Capítulo 07

📖 Ler Conteúdo Completo

🧠 Fazer Quiz

💻 Ver Exemplos

🧩 Exercícios

Slide 1 de 1

Atalhos: ← → Navegar • Espaço Avançar • F Tela Cheia • Home Início • End Fim