Jetpack Compose: fundamentos, funções Composable e State

O que é Jetpack Compose?

Jetpack Compose é um framework de UI do Google construído sobre princípios de programação reativa. Em vez de Activity com layout XML, FragmentManager e ViewBinding, o desenvolvedor descreve a interface através de funções Kotlin anotadas com @Composable. Compose não usa LayoutInflater — a UI são funções Kotlin puras compiladas em bytecode. O framework consiste em várias bibliotecas: Compose UI (componentes básicos Text, Button, Column, Row), Compose Foundation (Material Design, Gestures, Focus), Compose Material3 (Material You com Dynamic Colors) e Compose Runtime (State, Side Effects, Coroutines). Compose funciona no Android API 21+ (Android 5.0) e é totalmente compatível com código View/XML existente através do ComposeView — um adaptador AndroidView.

Compose vs View System

View System (2008) usa uma hierarquia de objetos View com gerenciamento manual: o desenvolvedor cria um layout XML, encontra Views via findViewById, implementa um Adapter para RecyclerView e chama notifyDataSetChanged quando os dados mudam. Compose descreve a UI funcionalmente: quando o estado muda, o framework recompõe apenas as funções Composable alteradas, calcula o diff e aplica alterações mínimas ao Canvas. O desempenho do Compose é comparável ao View System, e em cenários com listas complexas (LazyColumn) frequentemente supera o RecyclerView ao pular elementos desnecessários através do parâmetro key. Na IT Sectr, o Compose é usado para novos módulos de aplicações Android com minSdk 24+.

Funções Composable: blocos de construção da UI

@Composable — uma anotação que transforma uma função Kotlin comum em um bloco de construção de UI. Funções Composable podem chamar outras funções Composable, formando uma árvore de componentes. Ao contrário de View, funções Composable não têm estado por padrão — elas são stateless e redesenhadas a cada mudança de parâmetros de entrada ou State. O Compose Compiler transforma funções @Composable em código que pode ser interrompido e retomado (positional memoization) — isso permite que o Compose reinicie apenas as partes alteradas sem reconstruir totalmente a árvore.

import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun UserProfile(name: String, avatarUrl: String) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        AsyncImage(
            model = avatarUrl,
            contentDescription = "User avatar",
            modifier = Modifier.size(48.dp)
        )
        Spacer(modifier = Modifier.width(12.dp))
        Text(
            text = name,
            style = MaterialTheme.typography.titleMedium
        )
    }
}

A função UserProfile aceita name e avatarUrl como parâmetros, constrói uma linha com um avatar e um nome. Modifier.fillMaxWidth() estica o componente para toda a largura, .padding(16.dp) adiciona preenchimento. MaterialTheme.typography.titleMedium usa o estilo de sistema Material 3. Quando os parâmetros name ou avatarUrl mudam, Compose recompõe UserProfile — recriando o componente com novos valores.

State e Recomposition no Jetpack Compose

State no Compose é qualquer valor cuja mudança desencadeia a recomposição (reinício) de funções @Composable dependentes. A abordagem básica é mutableStateOf(), criando um MutableState<T> com suporte ao sistema de snapshot do Compose. Snapshot é um mecanismo de rastreamento de mudanças: quando State é escrito, Compose marca o Snapshot atual como dirty, e o agendador de recomposição reinicia apenas as funções Composable que leem esse State. Para coleções observáveis use mutableStateListOf() e mutableStateMapOf(). Compose suporta State de componentes Lifecycle-Aware via collectAsState() para Kotlin Flow e observeAsState() para LiveData.

@Composable
fun LikeButton() {
    var liked by remember { mutableStateOf(false) }
    var count by remember { mutableStateOf(42) }
    
    Button(
        onClick = {
            liked = !liked
            if (liked) count++ else count--
        },
        colors = ButtonDefaults.buttonColors(
            containerColor = if (liked) MaterialTheme.colorScheme.primary
                else MaterialTheme.colorScheme.surfaceVariant
        )
    ) {
        Text("♥ $count")
    }
}

O código cria um botão "Like" com estado liked (Boolean) e count (Int) armazenados via mutableStateOf(). Ao pressionar, liked é invertido e o contador aumenta/diminui — Compose recompõe LikeButton automaticamente. O delegado by permite usar State como uma variável normal: liked = !liked em vez de liked.value = !liked.value. A cor do botão muda reativamente entre primary (curtido) e surfaceVariant (não curtido).

remember: cache entre recomposições

remember — uma função do Compose que armazena em cache um valor entre recomposições. Sem remember, cada reinício de uma função Composable cria um novo estado (mutableStateOf) — isso quebra a lógica da aplicação: ao rotacionar a tela ou mudar o State pai, o contador reinicia. remember aceita uma lambda calculadora e computa o valor apenas na primeira composição; nas seguintes retorna o resultado em cache. Para reiniciar o cache use remember(key) — a chave determina quando recalcular o valor. remember(key1, key2) recalcula quando qualquer chave muda. Para estados de longa duração (que sobrevivem à rotação de tela) use rememberSaveable — um análogo do remember que salva em Bundle via SavedStateHandle.

@Composable
fun TimerScreen() {
    var seconds by rememberSaveable { mutableStateOf(0) }
    
    LaunchedEffect(Unit) {
        while (true) {
            delay(1000)
            seconds++
        }
    }
    
    Column(
        modifier = Modifier.fillMaxSize().padding(32.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "Elapsed: ${seconds}s",
            style = MaterialTheme.typography.displayMedium
        )
    }
}

rememberSaveable preserva seconds na rotação de tela (mudança de configuração). LaunchedEffect inicia uma corrotina que incrementa seconds a cada segundo. Na recomposição de TimerScreen (a cada segundo) seconds não reinicia graças ao rememberSaveable. Use remember normal para estados que não devem sobreviver a mudanças de configuração (por exemplo, flags de animação).

Modifier: cadeia de configurações Composable

Modifier — um objeto contêiner imutável que implementa o padrão Builder para configurar a aparência, o comportamento e o layout de componentes Composable. Cada chamada de método Modifier (.padding(), .width(), .clickable(), .background()) retorna um novo Modifier com o elemento adicionado. A ordem dos modificadores importa: .padding(16.dp).clickable { } — o preenchimento é aplicado antes do manipulador de clique, clickable rastreia toda a área incluindo o preenchimento. .clickable { }.padding(16.dp) — toda a área antes do preenchimento é clicável, o preenchimento desloca o conteúdo para dentro. Modifier suporta implementações personalizadas via then(otherModifier) e compositionLocal para acessar configurações pai.

@Composable
fun CardExample() {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
            .clickable { println("Card clicked") },
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surfaceVariant
        )
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text("Jetpack Compose", style = MaterialTheme.typography.titleLarge)
            Spacer(modifier = Modifier.height(8.dp))
            Text(
                "UI declarativa para Android com State e Modifier",
                style = MaterialTheme.typography.bodyMedium
            )
        }
    }
}

CardExample demonstra a cadeia Modifier: fillMaxWidth + padding + clickable. Card é um componente Material3 com suas próprias configurações de elevation e colors. O Column aninhado tem preenchimento interno de 16dp. Compose Material3 adapta automaticamente as cores ao Dynamic Color (Material You) no Android 12+. Card é um dos mais de 30 componentes Material3 integrados no Compose.

State hoisting e arquitetura do Compose

State hoisting — um padrão de elevar o estado para fora de uma função Composable para seu chamador, tornando a função stateless. Um componente stateless recebe dados e callbacks através de parâmetros sem possuir State por si só. Isso melhora a reutilização e testabilidade: o componente pode ser chamado com diferentes States e testado em preview. O Google recomenda a arquitetura: ViewModel + StateFlow (ou MutableStateFlow) + collectAsState() no Compose. ViewModel eleva o estado ao nível da tela, Compose o renderiza. Efeitos colaterais (LaunchedEffect, DisposableEffect) lidam com eventos únicos.