Hola, me llamo Miguel y hoy les traigo este nuevo artículo.
Anteriormente vimos cómo manejar los estados dentro de un Composable con el componente de selección de cantidad. En este artículo, veremos cómo hacer una lista desplazable.
Cuando se trata de mostrar una lista de elementos, necesitamos usar un RecyclerView
con un adaptador para definir cada artículo.
Esta característica básica puede resultar difícil en muchos casos, pero Jetpack Compose ofrece una nueva forma de mostrar una lista desplazable.
Índice
Componentes de composición desplazables
Jetpack Compose ofrece dos formas de mostrar una lista desplazable en vertical u horizontal:
- ScrollableColumn (resp. ScrollableRow) es una variante de
Column
(oRow
) que se desplaza cuando el contenido es mayor que su altura (o ancho). Eso puede ser el equivalente alScrollView
en la interfaz de usuario del marco anterior. - LazyColumnFor es una lista de desplazamiento vertical (u horizontal) que solo compone y presenta los elementos visibles actualmente. Eso puede ser el equivalente al
RecyclerView
y su adaptador en la interfaz de usuario del marco anterior.
Componente de artículo de producto
En Decathlon, cada artículo de producto tiene una imagen, un nombre y un precio. En nuestro ejemplo vamos a añadir la marca siguiendo estas especificaciones:
- El tamaño de la imagen es de
70 dp
de ancho y alto. - El texto de la marca y el nombre utilizan la fuente Roboto Condensed, según la tipografía oficial de Decathlon.
- El peso de la fuente para la marca es
W700
en negrita y para el nombreW400
en negrita. - El componente de precio.
Este componente se puede reutilizar cuando necesitemos mostrar un producto en una lista. Nuestro modelo es bastante simple.
data class Product( val price: Price, val name: String, val brand: String, val image: String )
Componentes ScrollableColumn
y ScrollableRow
Como se mencionó anteriormente, usaremos un ScrollableColumn
para hacer una lista que pueda desplazarse verticalmente o ScrollableRow
para desplazarse horizontalmente.
Echemos un vistazo al código fuente, ambos scrollers tienen una firma de método similar.
@Composable fun ScrollableColumn( modifier: Modifier = Modifier, scrollState: ScrollState = rememberScrollState(0f), verticalArrangement: Arrangement.Vertical = Arrangement.Top, horizontalGravity: Alignment.Horizontal = Alignment.Start, reverseScrollDirection: Boolean = false, isScrollEnabled: Boolean = true, contentPadding: InnerPadding = InnerPadding(0.dp), children: @Composable ColumnScope.() -> Unit ) @Composable fun ScrollableRow( modifier: Modifier = Modifier, scrollState: ScrollState = rememberScrollState(0f), horizontalArrangement: Arrangement.Horizontal = Arrangement.Start, verticalGravity: Alignment.Vertical = Alignment.Top, reverseScrollDirection: Boolean = false, isScrollEnabled: Boolean = true, contentPadding: InnerPadding = InnerPadding(0.dp), children: @Composable RowScope.() -> Unit )
Esto es similar a cualquier otro componente de Jetpack Compose. Podemos actualizar el modifier
para modificar la UI de acuerdo a nuestras necesidades, el último parámetro es el contenido del área desplazable y hay algunas configuraciones disponibles para el scroll.
Si queremos una lista desplazable simple con un divisor entre cada producto, podemos crear nuestro componible así:
@Composable fun ProductList(products: List<Product>, onClick: (Product) -> Unit) { ScrollableColumn(modifier = Modifier.fillMaxSize()) { products.forEachIndexed { index, product -> ProductItem(product = product, onClick = onClick) if (index < products.size - 1) { ProductDivider() } } } }
Declaramos nuestro ScrollableColumn
e iteramos dentro de este componente para mostrar nuestro artículo de producto. Nada mas.
Gracias a la interfaz de usuario declarativa, describimos lo que queremos mostrar y Jetpack Compose hace el resto.
Componentes LazyColumnFor
y LazyRowFor
Las versiones perezosas de componentes desplazables son más simples. No tiene configuraciones para el desplazamiento, pero pueden tomar su lista de modelos y solo necesita declarar el artículo de su producto según el modelo actual dado en el itemContent
lambda
.
@Composable fun <T> LazyColumnFor( items: List<T>, modifier: Modifier = Modifier, contentPadding: InnerPadding = InnerPadding(0.dp), horizontalGravity: Alignment.Horizontal = Alignment.Start, itemContent: @Composable LazyItemScope.(T) -> Unit ) @Composable fun <T> LazyRowFor( items: List<T>, modifier: Modifier = Modifier, contentPadding: InnerPadding = InnerPadding(0.dp), verticalGravity: Alignment.Vertical = Alignment.Top, itemContent: @Composable LazyItemScope.(T) -> Unit )
Al igual que en nuestro ejemplo anterior, la implementación se ve así:
@Composable fun LazyProductList(products: List<Product>, onClick: (Product) -> Unit) { LazyColumnForIndexed(items = products) { index, product -> ProductItem(product = product, onClick = onClick) if (index < products.size - 1) { ProductDivider() } } }
No es necesario declarar un RecyclerView
con un adaptador. Jetpack Compose no recicla ninguna vista.
Simplemente dibujará lo que el usuario debería ver y no necesita preocuparse por las cosas internas.
¡Las listas con Jetpack Compose son mágicas!
Desplazamiento suave en una posición específica
En muchos casos, desea desplazarse a una posición específica en su lista. Porque su lista está ordenada alfabéticamente y quiere ir al primer elemento de una letra o quiere volver al principio de la lista.
Si quiere hacer esto, necesita manipular un ScrollState de la función recordarScrollState.
En nuestro ejemplo, mostramos un botón de acción flotante en la parte inferior de nuestra pantalla. Al hacer clic en él, regresaremos al primer elemento de la lista.
@Composable fun ProductList(products: List<Product>) { val scrollState = rememberScrollState() Stack { ScrollableColumn( scrollState = scrollState, modifier = Modifier.fillMaxSize(), ) { // Product item } FloatingActionButton( modifier = Modifier.gravity(align = Alignment.BottomEnd).padding(15.dp), onClick = { scrollState.smoothScrollTo(0f) } ) { Icon(asset = vectorResource(id = R.drawable.ic_top)) } } }
En nuestro componible, declaramos una variable scrollState de la función rememberScrollState
, le damos este estado a nuestro componente desplazable y solo necesitamos llamar a la función necesaria para desplazarse a una posición específica, aquí smoothScrollTo con 0f
que corresponde al principio de nuestra lista.
En esta publicación, nos sumergimos rápidamente en mostrar una lista de productos usando LazyColumnFor
y ScrollableColumn
y vea cómo desplazarse a una posición específica.
¡Estén atentos para la próxima publicación sobre Jetpack Compose en Decathlon!
Añadir comentario