Jetpack Compose no desenvolvimento mobile: o que é, conceitos-chave e como funciona

Fundamentos do Jetpack Compose (@Composable, Composition, Recomposition)

@Composable — anotação que transforma uma função em Composable. Funções Composable são blocos de construção de UI. Elas não retornam uma View, emitem elementos para Composition. Composition — uma árvore de UI construída a partir de chamadas de funções Composable. O Compose compara a nova árvore com a antiga e atualiza apenas as partes alteradas.

Recomposition

Recomposition — reinício de funções Composable quando o estado muda. O Compose rastreia quais estados são lidos em cada função. Quando um estado muda, o Compose reinicia apenas as funções que leem esse estado (Smart Recomposition). A recomposição é otimista: pode executar várias vezes, então as funções devem ser puras (sem efeitos colaterais). Efeitos colaterais vão em LaunchedEffect ou DisposableEffect. Funções Composable não podem ser suspend. São chamadas de outras funções Composable. A ordem de chamada não é garantida (Compose pode reordenar).

// Exemplo de Composable com State Hoisting e LazyColumn
@Composable
fun ItemList(
    items: List<String>,
    onItemClick: (String) -> Unit
) {
    LazyColumn(
        modifier = Modifier.fillMaxSize()
    ) {
        items(items) { item ->
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .clickable { onItemClick(item) }
                    .padding(8.dp)
            ) {
                Text(
                    text = item,
                    style = MaterialTheme.typography.bodyLarge
                )
            }
        }
    }
}

@Composable
fun MainScreen() {
    var text by remember { mutableStateOf("") }
    val items = listOf("Item 1", "Item 2", "Item 3")

    Scaffold(
        topBar = {
            TopAppBar(title = { Text("Compose App") })
        }
    ) { padding ->
        ItemList(
            items = items,
            onItemClick = { selected -> text = selected }
        )
    }
}

Composition — árvore declarativa. Recomposition — reinício inteligente. A IT Sectr recomenda monitorar a estabilidade de tipos — tipos instáveis causam recomposição excessiva.

CompositionLocal

CompositionLocal — passagem implícita de dados no Compose. Análogo ao @Environment no SwiftUI. CompositionLocalProvider — definir um valor. current — leitura. Usado para: Theme (MaterialTheme), ContentScale, Density. CompositionLocal estático — para configuração sem alterações. CompositionLocal dinâmico — para valores mutáveis (temas). A IT Sectr recomenda usar CompositionLocal para configurações globais e parâmetros explícitos para dados.

Estado (remember, mutableStateOf, State Hoisting)

remember — preserva valor entre recomposições. mutableStateOf — cria estado observável (MutableState<T>). Quando alterado, desencadeia recomposição. State Hoisting — padrão: o estado é elevado ao componente pai, o filho recebe valor + callback. State (imutável) — somente leitura. MutableState — leitura + escrita. rememberSaveable — persiste durante rotação/morte do processo.

State Hoisting

State Hoisting — princípio: state down, events up. O estado é armazenado no pai e passado aos componentes filhos via parâmetros. Os componentes filhos reportam mudanças via lambdas (callback). Benefícios: reutilização, testabilidade, fonte única da verdade. Exemplo: em vez de MyTextField armazenar seu próprio estado, o pai armazena a string e a passa via value + onValueChange.

Estado Derivado

derivedStateOf — estado computado, recalculado apenas quando as dependências mudam. Usado para filtragem, conversão, validação. snapshotFlow — converte State em Flow. Usado para cadeias reativas. collectAsState — coleta Flow em State dentro de Composable. A IT Sectr recomenda derivedStateOf para valores computados e snapshotFlow para conectar State com corrotinas.

Contêineres (Column, Row, Box, LazyColumn)

Column — layout vertical (análogo a LinearLayout vertical). Row — layout horizontal. Box — layout de empilhamento (análogo a FrameLayout). LazyColumn — lista vertical rolável com carregamento lento. LazyRow — lista horizontal rolável. Scaffold — estrutura principal da tela: TopAppBar, BottomBar, FloatingActionButton, Snackbar. TopAppBar — barra superior. BottomNavigation — navegação inferior (NavigationBar no Material 3). Modifier — cadeia: .fillMaxWidth().padding(8.dp).clickable { }. A ordem dos modificadores importa — cada um cria um novo wrapper.

Otimização de LazyColumn

LazyColumn — lista virtualizada. Renderiza apenas elementos visíveis. Otimização: 1) key — chave única para o item, 2) contentType — agrupar itens por tipo, 3) itemContent — minimizar recomposição dentro do item, 4) LazyVerticalGrid / LazyHorizontalGrid — para grades. LazyLayout — layout lento personalizado. Paging 3 + Compose — paginação via collectAsLazyPagingItems. A IT Sectr recomenda key(item) para todos os LazyColumn para recomposição previsível.

Navegação (NavController, NavHost)

Navigation Compose — biblioteca de navegação. NavController — gerencia a pilha de destinos. NavHost — contêiner do grafo de navegação. composable("route") — registrar destino. navController.navigate("route") — navegar. popBackStack() — voltar. Argumentos: composable("detail/{id}", arguments = listOf(navArgument("id") { type = NavType.StringType })). Deep linking via intentFilter. BottomNavigation — integração com NavController: NavBarItem → navigate + popUpTo.

Navegação Avançada

Múltiplas back stacks — pilha de retorno separada para cada aba do BottomNavigation. SavedStateHandle — preservar argumentos durante morte do processo. NavArgs — argumentos type-safe (Kotlin 2.0+). Deep links — esquemas URL para links externos. Gesto de volta preditivo (Android 14+) — suporte a gesto de voltar com pré-visualização. A IT Sectr recomenda usar NavArgs para segurança de tipos e múltiplas back stacks para BottomNavigation.

Efeitos (LaunchedEffect, DisposableEffect)

LaunchedEffect — lança um bloco suspend em Composition. Cancelado ao sair de Composition. Reiniciado quando as keys mudam. Usado para: carregamento de dados, temporizadores, animações. DisposableEffect — para recursos que precisam de limpeza: onDispose { } — cancelar inscrição de listeners, fechar conexões. SideEffect — efeito síncrono (a cada recomposição). Usado para: registro, sincronização com código não Compose. A IT Sectr recomenda LaunchedEffect para carregamento de dados e DisposableEffect para limpeza.

Compose — função + modificador. SwiftUI — struct + modificador. Os conceitos são semelhantes, a sintaxe é diferente. A IT Sectr recomenda aprender ambos os frameworks — entender um facilita o aprendizado do outro.

Padrões de efeitos

rememberCoroutineScope — acesso a CoroutineScope fora de LaunchedEffect (por exemplo, ao clicar em um botão). snapshotFlow — converter State em Flow para cadeias. produceState — converter fonte não Compose em State. animateFloatAsState e animateColorAsState — animações via efeitos. A IT Sectr recomenda rememberCoroutineScope para eventos de UI e LaunchedEffect para carregamento automático.

Tematização (MaterialTheme, Material3)

MaterialTheme — tema global do Compose. Cores, tipografia, formas. MaterialTheme { } — envolve todo o aplicativo. Material3 (M3) — sistema de design do Google 2023+. Dynamic Colors — adaptação ao papel de parede (Android 12+). TextStyle — configuração de texto: fontSize, fontWeight, lineHeight. Shape — arredondamento de cantos. Elevation — sombras. A IT Sectr recomenda Material3 por padrão e Dynamic Colors para dispositivos modernos.

@Composable
fun AppTheme(content: @Composable () -> Unit) {
    val colorScheme = if (isSystemInDarkTheme()) {
        darkColorScheme(
            primary = Color(0xFFBB86FC),
            secondary = Color(0xFF03DAC6)
        )
    } else {
        lightColorScheme(
            primary = Color(0xFF6200EE),
            secondary = Color(0xFF03DAC6)
        )
    }
    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography(
            bodyLarge = TextStyle(fontSize = 16.sp)
        )
    ) { content() }
}

Animações (animate*, AnimatedVisibility)

animateFloatAsState — anima valor Float. animateColorAsState — anima cor. animateDpAsState — anima tamanho. AnimatedVisibility — mostrar/esconder com .animateEnterExit(). AnimatedContent — animação ao mudar conteúdo (crossfade, slide). updateTransition — animação baseada em estado enum. Animatable — animação personalizada via interface Animatable. A IT Sectr recomenda AnimatedVisibility para listas e AnimatedContent para transições de tela.

@Composable
fun AnimatedCounter(count: Int) {
    val animatedCount by animateFloatAsState(
        targetValue = count.toFloat(),
        animationSpec = spring(
            dampingRatio = Spring.DampingRatioMediumBouncy,
            stiffness = Spring.StiffnessLow
        )
    )

    AnimatedContent(targetState = count) { targetCount ->
        Text(
            text = "$targetCount",
            style = MaterialTheme.typography.displayLarge,
            modifier = Modifier.animateContentSize()
        )
    }
}

Testes (Compose UI Test)

Compose UI Test — teste de telas Compose. createComposeRule() — regra JUnit. setContent { } — definir Composable. onNodeWithText, onNodeWithTag, onNodeWithContentDescription — encontrar elementos. performClick, performTextInput, performScrollTo — ações. assertIsDisplayed, assertTextEquals — asserções. Semantics — árvore Semantics para acessibilidade e testes. IdlingResource — aguardar operações assíncronas. Testes de captura de tela — Papercuts, Roborazzi. A IT Sectr recomenda testes de UI para cada tela e testes unitários para ViewModel.

WindowSizeClass — adaptação ao tamanho da tela (Compact, Medium, Expanded). Relacionado a layouts responsivos do Material3. Usado no Adaptive Navigation Suite para alternância automática de BottomNavigation para NavigationRail. A IT Sectr recomenda WindowSizeClass para adaptação do Compose a tablets e desktop.

Paging 3 + Compose — biblioteca de paginação do Google. PagingData — fluxo de páginas. PagingConfig — configurações (pageSize, prefetchDistance). collectAsLazyPagingItems() — coletar no Compose. PagingSource — fonte personalizada. RemoteMediator — carregamento híbrido (rede + BD). Paging 3 é o padrão para listas de rolagem infinita no Compose.