Listados con LazyColumn y LazyRow

LazyColumn y LazyRow en Jetpack Compose son contenedores optimizados para listas grandes de elementos, evitando la creación de elementos fuera de la vista (carga perezosa o "lazy loading").

• LazyColumn organiza los elementos en una lista vertical.

• LazyRow organiza los elementos en una lista horizontal.

Estas listas son ideales cuando tienes muchos elementos, y quieres que solo se carguen cuando son visibles. Ambas listas tienen la misma estructura y funcionan de manera similar. Los componentes clave incluyen:

• items(): Para listar elementos únicos.

• itemsIndexed(): Para listar elementos con un índice (útil cuando necesitas la posición del elemento).

• item { }: Para añadir elementos individuales que no están en una lista.

LazyColumn para una lista vertical

Con el componente LazyColumn podemos crear una lista vertical de componentes

@Composable
fun SimpleLazyColumn() {
    // Crea una lista de 100 elementos
    val itemsList = List(100) { "Item #$it" } 
    LazyColumn {
        items(itemsList) { item ->
            Text(text = item, modifier = Modifier.padding(16.dp))
        }
    }
}

Para que este código funcione son necesarios los siguientes import

import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items

Explicación:

1. itemsList crea una lista de 100 elementos con el texto "Item #".

2. LazyColumn se utiliza para organizar estos elementos verticalmente.

3. La función items(itemsList) recorre cada elemento y lo coloca en la vista.

LazyRow para una lista horizontal

La configuración de LazyRow es similar a la de LazyColumn, pero organiza los elementos horizontalmente.

kotlinCopy code@Composable
fun SimpleLazyRow() {
    val itemsList = List(10) { "Horizontal Item #$it" }
    LazyRow {
        items(itemsList) { item ->
            Text(text = item, modifier = Modifier.padding(16.dp))
        }
    }
}

Explicación:

1. LazyRow organiza los elementos horizontalmente.

2. La función items(itemsList) recorre cada elemento de la lista y los dispone en fila.

---

4. Ejemplo con índices usando itemsIndexed

Si necesitas acceder al índice de cada elemento, puedes usar itemsIndexed.

@Composable
fun LazyColumnWithIndices() {
    val itemsList = List(20) { "Item #$it" }
    LazyColumn {
        itemsIndexed(itemsList) { index, item ->
            Text(
                text = "Index $index: $item",
                modifier = Modifier.padding(16.dp)
            )
        }
    }
}

Encabezados y pies de lista con item

Es posible agregar elementos que no sean parte de la lista (como encabezados y pies de página) utilizando la función item.

@Composable
fun LazyColumnWithHeaderAndFooter() {
    val itemsList = List(15) { "Item #$it" }
    LazyColumn {
        item {
            Text(text = "Encabezado", style = MaterialTheme.typography.h6, modifier = Modifier.padding(16.dp))
        }
        items(itemsList) { item ->
            Text(text = item, modifier = Modifier.padding(16.dp))
        }
        item {
            Text(text = "Pie de página", style = MaterialTheme.typography.h6, modifier = Modifier.padding(16.dp))
        }
    }
}

Configurar el Espaciado entre Elementos con Modifier

Si necesitas añadir espacio entre los elementos, puedes hacerlo con Arrangement en Modifier.padding().

@Composable
fun LazyColumnWithSpacing() {
    val itemsList = List(10) { "Item #$it" }
    LazyColumn(
        //añade espacio de 8dp entre cada elemento
        verticalArrangement = Arrangement.spacedBy(8.dp),
        // añade espacio alrededor de toda la lista.
        modifier = Modifier.padding(16.dp)
    ) {
        items(itemsList) { item ->
            Text(text = item, modifier = Modifier.fillMaxWidth())
        }
    }
}

Recomposiciones de listados y claves

El modificador key se utiliza para ayudar a Compose a identificar elementos específicos dentro de una lista o un conjunto de elementos que se recomponen frecuentemente. Al usar claves, le estás dando una identidad única a un elemento dentro de un grupo para que Compose sepa cómo gestionar de forma adecuada las recomposiciones.

Sin una clave, Compose puede no ser capaz de diferenciar correctamente entre instancias de composables, lo que puede llevar a errores o pérdida de estado.

¿Por qué es importante usar claves?

Las claves son útiles en situaciones donde los elementos de una lista o conjunto pueden cambiar de posición, agregarse o eliminarse, y deseas que Compose sepa qué elemento es cuál. De esta forma, el sistema puede preservar el estado correcto de los composables.

Por ejemplo, en listas dinámicas o con elementos interactivos, las claves aseguran que los elementos se identifiquen correctamente durante las recomposiciones, y no se pierda el estado específico de cada uno.

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

¿Qué pasa si no uso claves?

Si no usas claves, puede haber problemas a la hora de identificar qué elementos corresponden a qué instancias previas. Esto puede llevar a situaciones donde Compose pierde el estado específico de un elemento, o donde un elemento hereda el estado de otro.

Por ejemplo, si no usas key en una lista y reordenas los elementos, los estados (como el texto en un campo editable) podrían quedar asociados a un elemento incorrecto.