Jetpack Compose: fundamentos, funciones Composable y State

¿Qué es Jetpack Compose?

Jetpack Compose es un framework de UI de Google construido sobre principios de programación reactiva. En lugar de Activity con diseño XML, FragmentManager y ViewBinding, el desarrollador describe la interfaz mediante funciones Kotlin anotadas con @Composable. Compose no utiliza LayoutInflater — la UI son funciones Kotlin puras compiladas a bytecode. El framework consta de varias bibliotecas: Compose UI (componentes básicos Text, Button, Column, Row), Compose Foundation (Material Design, Gestures, Focus), Compose Material3 (Material You con Dynamic Colors) y Compose Runtime (State, Side Effects, Coroutines). Compose funciona en Android API 21+ (Android 5.0) y es totalmente compatible con código View/XML existente mediante ComposeView, un adaptador AndroidView.

Compose vs View System

View System (2008) utiliza una jerarquía de objetos View con gestión manual: el desarrollador crea un diseño XML, encuentra Views mediante findViewById, implementa un Adapter para RecyclerView y llama a notifyDataSetChanged cuando los datos cambian. Compose describe la UI de forma funcional: cuando el estado cambia, el framework recompone solo las funciones Composable modificadas, calcula el diff y aplica cambios mínimos al Canvas. El rendimiento de Compose es comparable al de View System, y en escenarios con listas complejas (LazyColumn) a menudo supera a RecyclerView al omitir elementos innecesarios mediante el parámetro key. En IT Sectr, Compose se utiliza para nuevos módulos de aplicaciones Android con minSdk 24+.

Funciones Composable: bloques de construcción de UI

@Composable — una anotación que convierte una función Kotlin normal en un bloque de construcción de UI. Las funciones Composable pueden llamar a otras funciones Composable, formando un árbol de componentes. A diferencia de View, las funciones Composable no tienen estado por defecto — son stateless y se redibujan en cada cambio de parámetros de entrada o State. El Compose Compiler transforma las funciones @Composable en código que puede ser interrumpido y reanudado (positional memoization), lo que permite a Compose reiniciar solo las partes modificadas sin reconstruir completamente el árbol.

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

La función UserProfile acepta name y avatarUrl como parámetros, construye una fila con un avatar y un nombre. Modifier.fillMaxWidth() estira el componente a todo el ancho, .padding(16.dp) añade relleno. MaterialTheme.typography.titleMedium utiliza el estilo de sistema Material 3. Cuando los parámetros name o avatarUrl cambian, Compose recompone UserProfile — recreando el componente con nuevos valores.

State y Recomposition en Jetpack Compose

State en Compose es cualquier valor cuyo cambio desencadena la recomposición (reinicio) de funciones @Composable dependientes. El enfoque básico es mutableStateOf(), que crea un MutableState<T> con soporte del sistema de snapshot de Compose. Snapshot es un mecanismo de seguimiento de cambios: cuando se escribe State, Compose marca el Snapshot actual como dirty, y el planificador de recomposición reinicia solo las funciones Composable que leen ese State. Para colecciones observables use mutableStateListOf() y mutableStateMapOf(). Compose admite State de componentes Lifecycle-Aware mediante collectAsState() para Kotlin Flow y 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")
    }
}

El código crea un botón "Like" con estado liked (Boolean) y count (Int) almacenados mediante mutableStateOf(). Al presionar, liked se invierte y el contador aumenta/disminuye — Compose recompone LikeButton automáticamente. El delegado by permite usar State como una variable normal: liked = !liked en lugar de liked.value = !liked.value. El color del botón cambia reactivamente entre primary (me gusta) y surfaceVariant (no me gusta).

remember: caché entre recomposiciones

remember — una función de Compose que almacena en caché un valor entre recomposiciones. Sin remember, cada reinicio de una función Composable crea un nuevo estado (mutableStateOf) — esto rompe la lógica de la aplicación: al rotar la pantalla o cambiar el State padre, el contador se reinicia. remember acepta una lambda calculadora y computa el valor solo en la primera composición; en las siguientes devuelve el resultado en caché. Para reiniciar la caché use remember(key) — la clave determina cuándo recalcular el valor. remember(key1, key2) recalcula cuando cualquier clave cambia. Para estados de larga duración (que sobreviven a la rotación de pantalla) use rememberSaveable — un análogo de remember que guarda en Bundle mediante 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 conserva seconds al rotar la pantalla (cambio de configuración). LaunchedEffect inicia una corrutina que incrementa seconds cada segundo. En la recomposición de TimerScreen (cada segundo) seconds no se reinicia gracias a rememberSaveable. Use remember normal para estados que no deben sobrevivir cambios de configuración (por ejemplo, banderas de animación).

Modifier: cadena de configuraciones Composable

Modifier — un objeto contenedor inmutable que implementa el patrón Builder para configurar la apariencia, el comportamiento y el diseño de componentes Composable. Cada llamada a un método de Modifier (.padding(), .width(), .clickable(), .background()) devuelve un nuevo Modifier con el elemento añadido. El orden de los modificadores importa: .padding(16.dp).clickable { } — el relleno se aplica antes del manejador de clic, clickable rastrea toda el área incluyendo el relleno. .clickable { }.padding(16.dp) — toda el área antes del relleno es cliqueable, el relleno desplaza el contenido hacia adentro. Modifier admite implementaciones personalizadas mediante then(otherModifier) y compositionLocal para acceder a configuraciones padre.

@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 con State y Modifier",
                style = MaterialTheme.typography.bodyMedium
            )
        }
    }
}

CardExample demuestra la cadena Modifier: fillMaxWidth + padding + clickable. Card es un componente Material3 con su propia configuración de elevation y colors. El Column anidado tiene un relleno interno de 16dp. Compose Material3 adapta automáticamente los colores a Dynamic Color (Material You) en Android 12+. Card es uno de los más de 30 componentes Material3 integrados en Compose.

State hoisting y arquitectura de Compose

State hoisting — un patrón de elevar el estado fuera de una función Composable hacia su llamador, haciendo la función stateless. Un componente stateless recibe datos y callbacks a través de parámetros sin poseer State por sí mismo. Esto mejora la reutilización y la testabilidad: el componente puede ser llamado con diferentes States y probado en preview. Google recomienda la arquitectura: ViewModel + StateFlow (o MutableStateFlow) + collectAsState() en Compose. ViewModel eleva el estado al nivel de pantalla, Compose lo renderiza. Los efectos secundarios (LaunchedEffect, DisposableEffect) manejan eventos únicos.