Jetpack Compose en el desarrollo móvil: qué es, conceptos clave y cómo funciona

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

@Composable — anotación que convierte una función en Composable. Las funciones Composable son bloques de construcción de UI. No devuelven una View, emiten elementos a Composition. Composition — un árbol de UI construido a partir de llamadas a funciones Composable. Compose compara el árbol nuevo con el antiguo y actualiza solo las partes cambiadas.

Recomposition

Recomposition — reinicio de funciones Composable cuando cambia el estado. Compose rastrea qué estados se leen en cada función. Cuando un estado cambia, Compose reinicia solo las funciones que leen ese estado (Smart Recomposition). La recomposición es optimista: puede ejecutarse varias veces, por lo que las funciones deben ser puras (sin efectos secundarios). Los efectos secundarios van en LaunchedEffect o DisposableEffect. Las funciones Composable no pueden ser suspend. Se llaman desde otras funciones Composable. El orden de llamada no está garantizado (Compose puede reordenar).

// Ejemplo de Composable con State Hoisting y 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 — árbol declarativo. Recomposition — reinicio inteligente. IT Sectr recomienda monitorear la estabilidad de tipos — los tipos inestables causan recomposición excesiva.

CompositionLocal

CompositionLocal — paso implícito de datos en Compose. Análogo a @Environment en SwiftUI. CompositionLocalProvider — establecer un valor. current — lectura. Se usa para: Theme (MaterialTheme), ContentScale, Density. CompositionLocal estático — para configuración sin cambios. CompositionLocal dinámico — para valores mutables (temas). IT Sectr recomienda usar CompositionLocal para configuraciones globales y parámetros explícitos para datos.

Estado (remember, mutableStateOf, State Hoisting)

remember — conserva el valor entre recomposiciones. mutableStateOf — crea estado observable (MutableState<T>). Al cambiar, desencadena recomposición. State Hoisting — patrón: el estado se eleva al componente padre, el hijo recibe valor + callback. State (inmutable) — solo lectura. MutableState — lectura + escritura. rememberSaveable — persiste durante rotación/muerte del proceso.

State Hoisting

State Hoisting — principio: state down, events up. El estado se almacena en el padre y se pasa a los componentes hijos mediante parámetros. Los componentes hijos informan cambios mediante lambdas (callback). Beneficios: reutilización, testabilidad, fuente única de verdad. Ejemplo: en lugar de que MyTextField almacene su propio estado, el padre almacena la cadena y la pasa mediante value + onValueChange.

Derived State

derivedStateOf — estado calculado, se recalcula solo cuando cambian las dependencias. Se usa para filtrado, conversión, validación. snapshotFlow — convierte State a Flow. Se usa para cadenas reactivas. collectAsState — recopila Flow en State dentro de Composable. IT Sectr recomienda derivedStateOf para valores calculados y snapshotFlow para conectar State con corrutinas.

Contenedores (Column, Row, Box, LazyColumn)

Column — layout vertical (análogo a LinearLayout vertical). Row — layout horizontal. Box — layout apilado (análogo a FrameLayout). LazyColumn — lista vertical desplazable con carga diferida. LazyRow — lista horizontal desplazable. Scaffold — estructura principal de pantalla: TopAppBar, BottomBar, FloatingActionButton, Snackbar. TopAppBar — barra superior. BottomNavigation — navegación inferior (NavigationBar en Material 3). Modifier — cadena: .fillMaxWidth().padding(8.dp).clickable { }. El orden de los modificadores importa — cada uno crea un nuevo wrapper.

Optimización de LazyColumn

LazyColumn — lista virtualizada. Renderiza solo elementos visibles. Optimización: 1) key — clave única para el elemento, 2) contentType — agrupar elementos por tipo, 3) itemContent — minimizar recomposición dentro del elemento, 4) LazyVerticalGrid / LazyHorizontalGrid — para cuadrículas. LazyLayout — layout diferido personalizado. Paging 3 + Compose — paginación mediante collectAsLazyPagingItems. IT Sectr recomienda key(item) para todos los LazyColumn para una recomposición predecible.

Navegación (NavController, NavHost)

Navigation Compose — biblioteca de navegación. NavController — gestiona la pila de destinos. NavHost — contenedor del grafo de navegación. composable("route") — registrar destino. navController.navigate("route") — navegar. popBackStack() — retroceder. Argumentos: composable("detail/{id}", arguments = listOf(navArgument("id") { type = NavType.StringType })). Deep linking mediante intentFilter. BottomNavigation — integración con NavController: NavBarItem → navigate + popUpTo.

Navegación avanzada

Múltiples back stacks — pila de retroceso separada para cada pestaña de BottomNavigation. SavedStateHandle — conservar argumentos durante la muerte del proceso. NavArgs — argumentos con seguridad de tipos (Kotlin 2.0+). Deep links — esquemas URL para enlaces externos. Gesto de retroceso predictivo (Android 14+) — soporte de gesto de retroceso con vista previa. IT Sectr recomienda usar NavArgs para seguridad de tipos y múltiples back stacks para BottomNavigation.

Efectos (LaunchedEffect, DisposableEffect)

LaunchedEffect — lanza un bloque suspend en Composition. Se cancela al salir de Composition. Se reinicia cuando cambian las keys. Se usa para: carga de datos, temporizadores, animaciones. DisposableEffect — para recursos que requieren limpieza: onDispose { } — darse de baja de listeners, cerrar conexiones. SideEffect — efecto síncrono (cada recomposición). Se usa para: registro, sincronización con código no Compose. IT Sectr recomienda LaunchedEffect para carga de datos y DisposableEffect para limpieza.

Compose — función + modificador. SwiftUI — struct + modificador. Los conceptos son similares, la sintaxis es diferente. IT Sectr recomienda aprender ambos frameworks — entender uno facilita el aprendizaje del otro.

Patrones de efectos

rememberCoroutineScope — acceso a CoroutineScope fuera de LaunchedEffect (por ejemplo, al hacer clic en un botón). snapshotFlow — convertir State a Flow para cadenas. produceState — convertir fuente no Compose a State. animateFloatAsState y animateColorAsState — animaciones mediante efectos. IT Sectr recomienda rememberCoroutineScope para eventos de UI y LaunchedEffect para carga automática.

Temas (MaterialTheme, Material3)

MaterialTheme — tema global de Compose. Colores, tipografía, formas. MaterialTheme { } — envuelve toda la aplicación. Material3 (M3) — sistema de diseño de Google 2023+. Dynamic Colors — adaptación al fondo de pantalla (Android 12+). TextStyle — configuración de texto: fontSize, fontWeight, lineHeight. Shape — redondeo de esquinas. Elevation — sombras. IT Sectr recomienda Material3 por defecto y 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() }
}

Animaciones (animate*, AnimatedVisibility)

animateFloatAsState — anima valores Float. animateColorAsState — anima colores. animateDpAsState — anima tamaño. AnimatedVisibility — mostrar/ocultar con .animateEnterExit(). AnimatedContent — animación al cambiar contenido (crossfade, slide). updateTransition — animación basada en estado enum. Animatable — animación personalizada mediante interfaz Animatable. IT Sectr recomienda AnimatedVisibility para listas y AnimatedContent para transiciones de pantalla.

@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()
        )
    }
}

Pruebas (Compose UI Test)

Compose UI Test — pruebas de pantallas Compose. createComposeRule() — regla JUnit. setContent { } — establecer Composable. onNodeWithText, onNodeWithTag, onNodeWithContentDescription — buscar elementos. performClick, performTextInput, performScrollTo — acciones. assertIsDisplayed, assertTextEquals — aserciones. Semantics — árbol Semantics para accesibilidad y pruebas. IdlingResource — esperar operaciones asíncronas. Pruebas de captura de pantalla — Papercuts, Roborazzi. IT Sectr recomienda pruebas UI para cada pantalla y pruebas unitarias para ViewModel.

WindowSizeClass — adaptación al tamaño de pantalla (Compact, Medium, Expanded). Relacionado con layouts responsivos de Material3. Se usa en Adaptive Navigation Suite para cambio automático de BottomNavigation a NavigationRail. IT Sectr recomienda WindowSizeClass para adaptación de Compose a tabletas y escritorio.

Paging 3 + Compose — biblioteca de paginación de Google. PagingData — flujo de páginas. PagingConfig — configuración (pageSize, prefetchDistance). collectAsLazyPagingItems() — recopilar en Compose. PagingSource — fuente personalizada. RemoteMediator — carga híbrida (red + BD). Paging 3 es el estándar para listas de desplazamiento infinito en Compose.