💻 Exemplos: Capítulo 03: Jetpack Compose: Fundamentos e Layouts

Exemplos de Código: Capítulo 03 — Jetpack Compose Declarativo

Especialização em Mobile Nativo com Android • Demonstrações Práticas Compiláveis

---

💻 Código de Demonstração: Componentes @Composable, Encadeamento de Modifiers e Previews

O código abaixo demonstra os blocos de construção elementares de interfaces de usuário com Jetpack Compose:

1. Funções @Composable reutilizáveis e desacopladas.
2. Layouts fundamentais: Column, Row, Box e ElevatedCard.
3. Ordem de precedência no encadeamento de Modifiers (padding, clip, background, clickable).
4. Suporte nativo a temas Claro e Escuro através de anotações @Preview.

package br.com.portal.mobile.android.cap03

import android.content.res.Configuration
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.CheckCircle
import androidx.compose.material.icons.filled.Person
import androidx.compose.material3.Button
import androidx.compose.material3.ElevatedCard
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
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.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

// =====================================================================
// 1. Componente Reutilizável: Cartão de Perfil de Desenvolvedor
// =====================================================================

@Composable
fun DevCard(
    nome: String,
    cargo: String,
    stackPrincipal: String,
    ativo: Boolean,
    onVerPerfilClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    ElevatedCard(
        shape = RoundedCornerShape(16.dp),
        modifier = modifier
            .fillMaxWidth()
            .padding(horizontal = 16.dp, vertical = 8.dp)
            .clickable { onVerPerfilClick() }
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            // Avatar Circular com Badge de Status
            Box(
                modifier = Modifier
                    .size(64.dp)
                    .clip(CircleShape)
                    .background(MaterialTheme.colorScheme.primaryContainer),
                contentAlignment = Alignment.Center
            ) {
                Icon(
                    imageVector = Icons.Default.Person,
                    contentDescription = "Avatar de $nome",
                    tint = MaterialTheme.colorScheme.onPrimaryContainer,
                    modifier = Modifier.size(36.dp)
                )
            }

            Spacer(modifier = Modifier.width(16.dp))

            // Informações do Desenvolvedor
            Column(
                modifier = Modifier.weight(1f),
                verticalArrangement = Arrangement.Center
            ) {
                Row(verticalAlignment = Alignment.CenterVertically) {
                    Text(
                        text = nome,
                        style = MaterialTheme.typography.titleMedium,
                        fontWeight = FontWeight.Bold,
                        color = MaterialTheme.colorScheme.onSurface
                    )
                    if (ativo) {
                        Spacer(modifier = Modifier.width(6.dp))
                        Icon(
                            imageVector = Icons.Default.CheckCircle,
                            contentDescription = "Verificado",
                            tint = Color(0xFF4CAF50),
                            modifier = Modifier.size(16.dp)
                        )
                    }
                }

                Spacer(modifier = Modifier.height(4.dp))

                Text(
                    text = cargo,
                    style = MaterialTheme.typography.bodyMedium,
                    color = MaterialTheme.colorScheme.onSurfaceVariant
                )

                Text(
                    text = "Tech: $stackPrincipal",
                    style = MaterialTheme.typography.labelSmall,
                    color = MaterialTheme.colorScheme.primary,
                    fontWeight = FontWeight.SemiBold
                )
            }

            // Ação Secundária
            Button(
                onClick = onVerPerfilClick,
                shape = RoundedCornerShape(8.dp)
            ) {
                Text(text = "Ver")
            }
        }
    }
}

// =====================================================================
// 2. Tela de Visualização com Previews (Light e Dark Mode)
// =====================================================================

@Composable
fun ListaDevsScreen() {
    Surface(
        modifier = Modifier.fillMaxSize(),
        color = MaterialTheme.colorScheme.background
    ) {
        Column(modifier = Modifier.padding(top = 16.dp)) {
            DevCard(
                nome = "Guilherme Santos",
                cargo = "Tech Lead Android",
                stackPrincipal = "Kotlin / Compose / KMP",
                ativo = true,
                onVerPerfilClick = {}
            )
            DevCard(
                nome = "Beatriz Alcantara",
                cargo = "Mobile Engineer Senior",
                stackPrincipal = "Compose Multiplatform / Coroutines",
                ativo = true,
                onVerPerfilClick = {}
            )
        }
    }
}

@Preview(name = "Modo Claro", showBackground = true)
@Preview(name = "Modo Escuro", uiMode = Configuration.UI_MODE_NIGHT_YES, showBackground = true)
@Composable
fun DevCardPreview() {
    MaterialTheme {
        ListaDevsScreen()
    }
}