Instruções Gerais:

  • Resolva as atividades em ordem progressiva de maturidade.
  • Cada nível adiciona requisitos técnicos, tratamento de erros e casos de borda reais.
  • Consulte o gabarito comentado ao final de cada questão para autoavaliação.

🎯 Nível 1: Fundamentos

Problema 7.1 — Encadeamento e Ordem de Execução dos Modifiers

Contexto: Encadeamento e Ordem de Execução dos Modifiers no contexto de Modifiers Avançados, Alinhamento, Padding, Backgrounds e Clippings.

Requisitos de Execução:

  1. Demonstrar como a ordem de padding() e background() altera radicalmente o resultado visual.

Resultado Esperado

Efeitos visuais da ordem dos Modifiers demonstrados com clareza.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_7_1_SeuNome
  2. Envie na tarefa: Atividade Cap 7 - Modifiers Avançados, Alinhamento, Padding, Backgrounds e Clippings
🔑 Gabarito de Código & Solução Comentada 
package com.empresa.mobile.ui

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun DemonstrarOrdemModifiers() {
    // Background desenha na area antes do segundo padding
    Box(
        modifier = Modifier
            .size(100.dp)
            .padding(8.dp)
            .background(Color.Blue)
            .padding(8.dp)
    ) {
        Text("Compose", color = Color.White)
    }
}

🔍 Nível 2: Prática

Problema 7.2 — Recorte de Formas (Clipping) com CircleShape e RoundedCornerShape

Contexto: Recorte de Formas (Clipping) com CircleShape e RoundedCornerShape no contexto de Modifiers Avançados, Alinhamento, Padding, Backgrounds e Clippings.

Requisitos de Execução:

  1. Criar avatar de perfil circular com borda colorida e recorte preciso.

Resultado Esperado

Avatar com clipping circular e borda elegante.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_7_2_SeuNome
  2. Envie na tarefa: Atividade Cap 7 - Modifiers Avançados, Alinhamento, Padding, Backgrounds e Clippings
🔑 Gabarito de Código & Solução Comentada 
package com.empresa.mobile.ui

import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun AvatarCircular(iniciais: String) {
    Box(
        modifier = Modifier
            .size(56.dp)
            .clip(CircleShape)
            .border(2.dp, Color.Cyan, CircleShape),
        contentAlignment = Alignment.Center
    ) {
        Text(text = iniciais, color = Color.Black)
    }
}

⚡ Nível 3: Integração

Problema 7.3 — Degradê e Gradientes com Brush.horizontalGradient

Contexto: Degradê e Gradientes com Brush.horizontalGradient no contexto de Modifiers Avançados, Alinhamento, Padding, Backgrounds e Clippings.

Requisitos de Execução:

  1. Aplicar gradiente linear corporativo no fundo de um botão de ação rápida.

Resultado Esperado

Botão estilizado com gradiente linear vibrante.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_7_3_SeuNome
  2. Envie na tarefa: Atividade Cap 7 - Modifiers Avançados, Alinhamento, Padding, Backgrounds e Clippings
🔑 Gabarito de Código & Solução Comentada 
package com.empresa.mobile.ui

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun BotaoGradiente(texto: String, onClick: () -> Unit) {
    val gradiente = Brush.horizontalGradient(listOf(Color(0xFF6200EA), Color(0xFF03DAC5)))
    Box(
        modifier = Modifier
            .clip(RoundedCornerShape(8.dp))
            .background(gradiente)
            .clickable(onClick = onClick)
            .padding(horizontal = 24.dp, vertical = 12.dp)
    ) {
        Text(text = texto, color = Color.White)
    }
}

🏆 Nível 4: Desafio Corporativo

Problema 7.4 — Modifier Customizado Reutilizável com composed / Modifier.Node

Contexto: Modifier Customizado Reutilizável com composed / Modifier.Node no contexto de Modifiers Avançados, Alinhamento, Padding, Backgrounds e Clippings.

Requisitos de Execução:

  1. Criar modifier de extensão .efeitoSombraCard() para padronizar estilos corporativos.

Resultado Esperado

Modifier corporativo customizado e reutilizável por toda a aplicação.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_7_4_SeuNome
  2. Envie na tarefa: Atividade Cap 7 - Modifiers Avançados, Alinhamento, Padding, Backgrounds e Clippings
🔑 Gabarito de Código & Solução Comentada 
package com.empresa.mobile.ui

import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

fun Modifier.efeitoCardCorporativo(elevacao: Dp = 4.dp): Modifier = this
    .shadow(elevation = elevacao, shape = RoundedCornerShape(12.dp))

fun validarConfiguracaoModifier(): Boolean {
    val mod = Modifier.efeitoCardCorporativo()
    return mod != Modifier
}
⬅️ Voltar ao Índice de Exercícios 📚 Sumário de Tópicos