martes, 24 de junio de 2025

Aprende Jetpack Compose

📚 Basado en el tutorial oficial: Jetpack Compose Tutorial - Android Developers

Hoy reforcé mis conocimientos de Jetpack Compose, la nueva forma de crear interfaces en Android usando Kotlin. Aunque el tutorial oficial es muy bueno, noté que si vienes del mundo web (JavaScript, PHP, Python), hay varios conceptos que pueden resultar difíciles al inicio. Ideal si has usado Java o C# sera muy entendible el tutorial en ingles.

jetpack-compose-tutorial

¿Qué es Jetpack Compose?

Una forma más rápida, simple y moderna de crear interfaces en Android. Usando Kotlin, puedes escribir menos código y tener más control visual. Es reactivo y declarativo: defines qué mostrar, no cómo.

🧠 Lo difícil: me costo entender a la primera

1. 💾 remember + mutableStateOf: el corazón de Compose

var contador by remember { mutableStateOf(0) }
  • mutableStateOf(0): crea una variable observable.
  • remember: la mantiene viva mientras el composable esté en memoria.
  • by: te permite usarla directamente (contador++).

¿Qué ocurre si cambia contador?

Compose recompone el UI que usa esa variable. Es decir, ¡redibuja solo lo necesario!

📦 Ejemplo completo:

@Composable
fun ContadorEjemplo() {
    var contador by remember { mutableStateOf(0) }

    Column {
        Text("Contador: $contador")
        Button(onClick = { contador++ }) {
            Text("Aumentar")
        }
    }
}

🚫 ¿Y si olvidas remember?
Cada vez que se recomponga, contador volverá a cero. Pierdes el estado.

🧩 En resumen:

Concepto ¿Qué hace?
mutableStateOf() Crea una variable que puede cambiar y es observable
remember Guarda el estado mientras el composable viva
Recomposición Jetpack Compose vuelve a dibujar si el estado cambia

2.📜 LazyColumn y LazyRow : listas eficientes

Son como listas con scroll (vertical u horizontal), pero solo renderizan lo visible, ahorrando recursos.

Composable ¿Qué hace?
Column Renderiza todos los elementos (puede ser lento)
LazyColumn Renderiza solo lo visible (mucho más rápido)

Perfecto para apps con muchas tarjetas, ítems o mensajes. 

lazy-vertical-jetpack-compose-kotlin

✅ ¿Qué aprendí realmente?

✔️ Cómo crear interfaces declarativas con @Composable
✔️ Cómo estructurar la UI con Column, Row, LazyColumn
✔️ Cómo mantener estado con remember y mutableStateOf
✔️ Cómo reaccionar a eventos con botones
✔️ Cómo hacer apps más eficientes
✔️ Cómo usar animaciones simples

🚀 Conclusión

Si vienes de JavaScript, PHP o Python, al principio puede costar, pero una vez entiendes los conceptos base, Compose se vuelve natural, rápido y poderoso. Te recomiendo leerlo todo el mismo dia para que comprendas todos los conceptos.

References

No hay comentarios:

Publicar un comentario

Soy Aníbal 🐧💻. ¿Tienes una gran Idea/Proyecto?

¿Tienes un proyecto en mente o necesitas resolver un desafío técnico? Estoy aquí para ayudarte a encontrar la mejor solución. 🚀

Hablemos sobre tu proyecto