Listas con LazyColumn
Muestre listas desplazables de forma eficiente
Listas con LazyColumn es una lección gratuita de Android Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Android Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Android Academy incluye 4 lecciones en total.
¿Por qué no usar simplemente un Column?
Un Column compone todos sus elementos secundarios de una vez. En una lista larga o desplazable, esto desperdicia memoria y ralentiza la interfaz. Necesita una lista que solo cree los elementos visibles.
Entra LazyColumn
LazyColumn es una lista vertical desplazable que solo compone los elementos que están actualmente en pantalla, como el antiguo RecyclerView, pero de forma mucho más sencilla.
LazyColumn {
items(messages) { msg ->
Text(text = msg)
}
}La función items()
Dentro de la lambda de LazyColumn, invoque items(list) y proporciónele un composable para cada elemento. Compose lo invoca de forma diferida a medida que el usuario se desplaza.
LazyColumn {
items(users) { user ->
Text(text = user.name)
}
}No es un bucle normal
No utilice un bucle for normal dentro de LazyColumn, ya que eso anula la carga diferida. Utilice siempre items() (o itemsIndexed()) para que Compose pueda crear los elementos bajo demanda.
Un único elemento de encabezado
Utilice item { } (en singular) para añadir un elemento fijo, como un encabezado, antes de los elementos del bucle.
LazyColumn {
item { Text("Header") }
items(data) { Text(it) }
}itemsIndexed
Cuando necesite la posición, utilice itemsIndexed para obtener tanto el índice como el elemento.
LazyColumn {
itemsIndexed(data) { index, value ->
Text(text = "$index: $value")
}
}Claves para la estabilidad
Proporcione una key estable para cada elemento para que Compose pueda realizar un seguimiento correcto cuando cambie la lista, mejorando así el rendimiento y las animaciones.
items(users, key = { it.id }) { user ->
Text(user.name)
}Espaciado de elementos
LazyColumn acepta verticalArrangement y contentPadding para espaciar los elementos y añadir relleno en los bordes de la lista.
LazyColumn(
verticalArrangement = Arrangement.spacedBy(8.dp),
contentPadding = PaddingValues(16.dp)
) {
items(data) { Text(it) }
}LazyRow
También existe LazyRow para listas con desplazamiento horizontal: la misma API, pero en otra dirección. Es ideal para carruseles de tarjetas.
LazyRow {
items(images) { img ->
Image(painter = img, contentDescription = null)
}
}Desplazamiento integrado
No añada un modificador de desplazamiento a un LazyColumn: se desplaza automáticamente. Añadir verticalScroll provocaría un conflicto y un error. Las listas Lazy gestionan el desplazamiento por sí mismas.
Cómo unirlo todo
Una lista de elementos con encabezado, claves y espaciado.
@Composable
fun MessageList(messages: List<Message>) {
LazyColumn(
verticalArrangement = Arrangement.spacedBy(8.dp)
) {
item { Text("Inbox") }
items(messages, key = { it.id }) { msg ->
Text(text = msg.text)
}
}
}Comprobación rápida
¿Cuál es la principal ventaja de LazyColumn frente a un Column desplazable?
Resumen
LazyColumn:
- Solo crea los elementos visibles, por lo que es eficiente para listas largas.
- Utilice
items()/itemsIndexed(), no un buclefor. - Añada una
keypara mantener la estabilidad y utiliceitem { }para los encabezados. - Se desplaza automáticamente, sin ningún modificador de desplazamiento.
LazyRowes la versión horizontal.
Aprende Kotlin con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 36
- Lecciones
- 152
Preguntas frecuentes
¿La lección «Listas con LazyColumn» es gratis?
Sí — el texto completo de «Listas con LazyColumn» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Android Academy, actualiza a CoddyKit PRO. El curso de Android Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Listas con LazyColumn»?
Muestre listas desplazables de forma eficiente Practicas Android Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Android Academy?
No se requiere experiencia previa. Android Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Listas con LazyColumn»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Android Academy?
Sí. Cada lección de Android Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Column, Row y Box
- El sistema Modifier
- Alineación y distribución
- Listas con LazyColumn