Especialista em Jetpack Compose para Android

Visão Geral

Um guia completo para construir aplicativos Android de qualidade de produção usando Jetpack Compose. Esta habilidade abrange padrões arquiteturais, gerenciamento de estado com ViewModels, segurança de tipo na navegação e técnicas de otimização de desempenho.

Quando Usar Esta Habilidade

• Use ao iniciar um novo projeto Android com Jetpack Compose.
• Use ao migrar layouts XML legados para Compose.
• Use ao implementar gerenciamento de estado de UI complexo e efeitos colaterais.
• Use ao otimizar o desempenho do Compose (contagens de recomposição, estabilidade).
• Use ao configurar a Navegação com segurança de tipo.

Guia Passo a Passo

1. Configuração do Projeto e Dependências

Certifique-se de que seu libs.versions.toml inclua o BOM e as bibliotecas Compose necessárias.

[versions]
composeBom = "2024.02.01"
activityCompose = "1.8.2"

[libraries]
androidx-compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "composeBom" }
androidx-ui = { group = "androidx.compose.ui", name = "ui" }
androidx-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics" }
androidx-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview" }
androidx-material3 = { group = "androidx.compose.material3", name = "material3" }
androidx-activity-compose = { group = "androidx.activity", name = "activity-compose", version.ref = "activityCompose" }

2. Padrão de Gerenciamento de Estado (MVI/MVVM)

Use ViewModel com StateFlow para expor o estado da UI. Evite expor MutableStateFlow.

// UI State Definition
data class UserUiState(
    val isLoading: Boolean = false,
    val user: User? = null,
    val error: String? = null
)

// ViewModel
class UserViewModel @Inject constructor(
    private val userRepository: UserRepository
) : ViewModel() {

    private val _uiState = MutableStateFlow(UserUiState())
    val uiState: StateFlow<UserUiState> = _uiState.asStateFlow()

    fun loadUser() {
        viewModelScope.launch {
            _uiState.update { it.copy(isLoading = true) }
            try {
                val user = userRepository.getUser()
                _uiState.update { it.copy(user = user, isLoading = false) }
            } catch (e: Exception) {
                _uiState.update { it.copy(error = e.message, isLoading = false) }
            }
        }
    }
}

3. Criando o Composable da Tela

Consuma o estado em um composable de "Tela" e passe os dados para componentes sem estado.

@Composable
fun UserScreen(
    viewModel: UserViewModel = hiltViewModel()
) {
    val uiState by viewModel.uiState.collectAsStateWithLifecycle()

    UserContent(
        uiState = uiState,
        onRetry = viewModel::loadUser
    )
}

@Composable
fun UserContent(
    uiState: UserUiState,
    onRetry: () -> Unit
) {
    Scaffold { padding ->
        Box(modifier = Modifier.padding(padding)) {
            when {
                uiState.isLoading -> CircularProgressIndicator()
                uiState.error != null -> ErrorView(uiState.error, onRetry)
                uiState.user != null -> UserProfile(uiState.user)
            }
        }
    }
}

Exemplos

Exemplo 1: Navegação com Segurança de Tipo

Usando a nova Navegação Compose com Segurança de Tipo (disponível em versões recentes).

// Define Destinations
@Serializable
object Home

@Serializable
data class Profile(val userId: String)

// Setup NavHost
@Composable
fun AppNavHost(navController: NavHostController) {
    NavHost(navController, startDestination = Home) {
        composable<Home> {
            HomeScreen(onNavigateToProfile = { id ->
                navController.navigate(Profile(userId = id))
            })
        }
        composable<Profile> { backStackEntry ->
            val profile: Profile = backStackEntry.toRoute()
            ProfileScreen(userId = profile.userId)
        }
    }
}

Melhores Práticas

• ✅ Faça: Use remember e derivedStateOf para minimizar cálculos desnecessários durante a recomposição.
• ✅ Faça: Marque classes de dados usadas no estado da UI como @Immutable ou @Stable se elas contiverem List ou outros tipos instáveis para habilitar o salto inteligente de recomposição.
• ✅ Faça: Use LaunchedEffect para efeitos colaterais únicos (como exibir um Snackbar) acionados por alterações de estado.
• ❌ Não faça: Execute operações caras (como ordenar uma lista) diretamente dentro do corpo da função Composable sem remember.

…