📚 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.
¿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 ("Contador: $contador")
Text(onClick = { contador++ }) {
Button("Aumentar")
Text}
}
}
🚫 ¿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.
✅ ¿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.
No hay comentarios:
Publicar un comentario