105. Listas, Grid¶

En este apartado se incluye: * LazyColumn y LazyRow * Grid (cuadrícula)

105.1 Listas Diferidas (Lazy List)¶

Para mostrar listas, utilizamos LazyColumn o LazyRow. Estos componentes son similares a RecyclerView en el mundo de Android clásico, pero más fáciles de utilizar. Debemos proporcionar la lista de elementos y definir cómo se debe mostrar cada elemento. Por ejemplo:

LazyColumn {
    items(items) { item ->
        Text("Item: $item")
    }
    item {
        Text("otro")
    }
}

items Agrega una colección de elementos y también se pueden incluir elementos individuales item.

105.2 Claves de elementos¶

Aplica a LazyColumn y LazyRow.

La posición determina el elemento pulsado o seleccionado. Esto puede dar problemas si se reordenan las listas.
Para evitar este problema se pueden utilizar una clave (key) para cada elemento (como parámetro de items )

@Composable
fun MessageList(messages: List<Message>) {
    LazyColumn {
        items(
            items = messages,
            key = { message ->
                // Devuelve una clave única para el item
                message.id
            }
        ) { message ->
            MessageRow(message)
        }
    }
}

(mas detalles aqui)

105.3 Padding del contenido¶

Para añadir espacio entre los bordes y el contenidos usamos PaddingValues con el parámetro de la función contentPadding

LazyColumn(
    contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
) {
    // ...
}

105.4 Espaciado de contenido.¶

Para agregar espaciado entre elementos que forman el contenido usamos:

// solamente vertical
LazyColumn(
    verticalArrangement = Arrangement.spacedBy(4.dp),
) {
    // ...
}
// solamente horizontal
LazyRow(
    horizontalArrangement = Arrangement.spacedBy(4.dp),
) {
    // ...
}

y en los Grid tanto horizontal como vertical:

LazyVerticalGrid(
    columns = GridCells.Fixed(2),
    verticalArrangement = Arrangement.spacedBy(16.dp),
    horizontalArrangement = Arrangement.spacedBy(16.dp)
) {
    items(data) { item ->
        Item(item)
    }
}

105.5 Cuadrículas diferidas (LazyGrid)¶

LazyVerticalGrid muestra los elementos en una cuadrícula con deslazamiento vertical que ocupa varias columnas

La declaración de LazyVerticalGrid:

@Composable
@ComposableTarget
public fun LazyVerticalGrid(
    columns: GridCells,
    modifier: Modifier = COMPILED_CODE,
    state: LazyGridState = COMPILED_CODE,
    contentPadding: PaddingValues = COMPILED_CODE,
    reverseLayout: Boolean = COMPILED_CODE,
    verticalArrangement: Arrangement.Vertical = COMPILED_CODE,
    horizontalArrangement: Arrangement.Horizontal = COMPILED_CODE,
    flingBehavior: FlingBehavior = COMPILED_CODE,
    userScrollEnabled: Boolean = COMPILED_CODE,
    content: LazyGridScope.() -> Unit
): Unit

Y para los items en content:

public abstract fun items(
    count: Int,
    key: ((Int) -> Any)? = COMPILED_CODE,
    span: (LazyGridItemSpanScope.(Int) -> GridItemSpan)? = COMPILED_CODE,
    contentType: (Int) -> Any? = COMPILED_CODE,
    itemContent: @Composable() (LazyGridItemScope.(Int) -> Unit)
): Unit

El parámetro columns en LazyVerticalGrid controla el modo en que se forman las celdas en columnas. En el siguiente ejemplo, se muestran elementos de una cuadrícula con GridCells.Adaptive para que cada columna tenga al menos 128.dp ancho:

@Composable
fun PhotoGrid(photos: List<Photo>) {
    LazyVerticalGrid(
        columns = GridCells.Adaptive(minSize = 128.dp)
    ) {
        items(photos) { photo ->
            PhotoItem(photo)
        }
    }
}

Se crearan tantas columnas como se puedan incluir en el espacio disponible con los 128.dp de cada columna.

También es posible forzar un número de columnas fijo, adaptado el ancho , con GridCells.Fixed.

Se puede personalizar el diseño de columnas con span y maxLineSpan utilizandos con item e items

LazyVerticalGrid(
    // ...
) {
    item(span = {
        // LazyGridItemSpanScope:
        // maxLineSpan
        GridItemSpan(maxLineSpan)
    }) {
        MiCard(“Fruits”)
    }
    // ...
}

* span = { ... }: Aquí es donde la magia sucede. Este bloque te permite definir cuánto espacio en la cuadrícula ocupará tu elemento. * GridItemSpan(maxLineSpan): Esto especifica el "span" de tu elemento. Por ejemplo, si tu cuadrícula tiene 4 columnas y pones GridItemSpan(2), tu elemento ocupará 2 columnas. Si usas GridItemSpan(4), ocupará toda la fila. * MiCard("Fruits"): Este es un ejemplo de contenido de tu elemento, puede ser cualquier composable que hayas creado, como una tarjeta que muestra una categoría.

105.6 Animar elementos.¶

Se utiliza el modificador animateItemPlacement en el elemento del contenido que queremos animar:

LazyColumn {
    items(books, key = { it.id }) {
        Row(Modifier.animateItemPlacement()) {
            // ...
        }
    }
}

105.7 Encabezados fijos (Experimental)¶

(Continuar aqui)

105.8 Apendice¶

Enlaces:

(En Android Developer AD)

Versión 0.5 (20-12-23)