Sobes.tech
Middle

¿Cómo crear un RecyclerView en Jetpack Compose?

sobes.tech AI

Respuesta de la IA

En Jetpack Compose no existe un RecyclerView en el sentido tradicional. Para mostrar listas, se utilizan LazyColumn (para listas verticales) y LazyRow (para listas horizontales). Ofrecen una eficiencia similar mediante la reutilización de elementos.

Ejemplo de uso de LazyColumn:

import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.Text
import androidx.compose.runtime.Composable

@Composable
fun SimpleList(itemsList: List<String>) {
    LazyColumn {
        items(itemsList) { item ->
            Text(text = item)
        }
    }
}

Análisis:

  • LazyColumn: Función composable que muestra elementos en una lista vertical, creándolos según sea necesario.
  • items(itemsList) { item -> ... }: Extensión para LazyListScope que permite iterar sobre la lista de datos (itemsList) y para cada elemento (item) llamar a un lambda Composable proporcionado. En este bloque se define cómo será cada elemento de la lista.
  • Text(text = item): Función composable simple que muestra el texto del elemento actual de la lista.

Características clave de LazyColumn/LazyRow:

  • Eficiencia: Los elementos se crean y componen solo cuando se vuelven visibles en la pantalla o están cerca del borde. Esto reduce el consumo de memoria y mejora el rendimiento en listas grandes.
  • Simplicidad: API simplificada en comparación con RecyclerView, sin necesidad de crear adaptadores, ViewHolder ni gestionar el ciclo de vida de estos componentes.
  • Primero en composable: Se integra completamente con otras funciones de Compose.

Se puede usar itemsIndexed para acceder al índice de cada elemento:

import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.material.Text
import androidx.compose.runtime.Composable

@Composable
fun IndexedList(itemsList: List<String>) {
    LazyColumn {
        itemsIndexed(itemsList) { index, item ->
            Text(text = "Ítem en índice $index: $item")
        }
    }
}

Para comportamientos más complejos (por ejemplo, diferentes tipos de vistas), se puede usar sobrecargas de items o item:

import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.Text
import androidx.compose.runtime.Composable

sealed class ListItem {
    data class TextItem(val content: String) : ListItem()
    data class ImageItem(val url: String) : ListItem()
}

@Composable
fun MixedList(itemsList: List<ListItem>) {
    LazyColumn {
        items(itemsList) { item ->
            when (item) {
                is ListItem.TextItem -> Text(text = item.content)
                is ListItem.ImageItem -> {
                    // Aquí se puede mostrar una imagen, por ejemplo con la función Image
                    Text(text = "Imagen: ${item.url}") // Marcador de posición
                }
            }
        }
    }
}