Jetpack componer – LazyGridFor | GridView con paginación

¿Entusiasta? ¡Yo también! Entonces, sin más preámbulos, vamos a crear una aplicación de muestra para Android usando Jetpack Compose. La mayoría de las aplicaciones implican cargar datos en listas / cuadrículas usando el estado de carga y los errores, por lo que este artículo muestra el escenario más comúnmente usado, que es mostrar una lista de elementos recuperando datos del servidor junto con las pantallas de carga y error, así como pagándolas.

Para comenzar con Jetpack Compose, instale La última versión de Android Studio 4.2 y cree un nuevo proyecto con la plantilla Actividad de composición vacía que permite al IDE establecer dependencias en la composición y configuración de Gradle. Para más información visite https://developer.android.com/jetpack/compose/setup

Los widgets de escritura se crean utilizando funciones de anotación con @Composable

Primero necesitamos crear funciones de escritura para los estados de pantalla que son LOADING, ERROR, EMPTY y DATA, también IDLE Si necesario.

En este caso, necesitamos tres widgets de escritura para mostrar los estados de carga, los errores y una interfaz de usuario vacía. Además, asegúrese de que los mensajes de error y en blanco sean configurables para que podamos usar las mismas funciones en toda la aplicación nuevamente.

Ahora que los widgets de composición están listos, es hora de renderizar los widgets según el estado actual de la pantalla. Para hacer esto, creemos una clase de enumeración con todos los estados posibles.

State es el poseedor del valor que tiene el valor y la composición que utiliza State para recuperar el valor, inicia sesión automáticamente en los cambios de valor dentro state, lo que significa que cada vez que cambia el valor, la corriente RecomposeScope se volverá a dibujar con el nuevo valor.

Cree una función de escritura con State valor como PageState dibujar / volver a dibujar widgets plegables según el estado actual de la página

Hasta ahora, bien, el widget State Handler Compose está listo pero necesita State<PageState> actualice dinámicamente la interfaz de usuario para lograr esto, creemos ViewModel quien es responsable de actualizar el valor State<PageState> basado en el modo actual y también recupera datos del servidor mientras proporciona espacio para la paginación.

También implemente la lógica de paginación en ViewModel, crea una clase que agregue el nuevo resultado al existente

Ahora para vincular widgets de composición con ViewModel, Fragment se utiliza como contenedor de interfaz de usuario y ComposeView dentro de una Fragment, admite la creación de widgets

Perfecto! La aplicación está casi lista, en este punto puede mostrar carga, errores y una interfaz de usuario en blanco. Fragment, veamos cómo crear GridView compuesto de s paging para llenar el contenido de la pantalla después de cargar.

El kit Jetpack Compose ya no está incluido RecyclerView equivalenteLazyRowFor y LazyColumnFor apilar elementos vertical y horizontalmente con una implementación perezosa. Actualmente no hay LazyGrid soporte incorporado.

Crea uno fusionando LazyColumnFor y Row junto con varias modificaciones de datos. También verifique el índice correcto item se calcula porque se utiliza con fines de paginación.

Crea un elemento de cuadrícula para llenar LazyGridFor y también una clase de modelo para vincular datos a un elemento de cuadrícula.

Ahora completa Fragment contenido usando datos LazyGridFor e implementar lógica de paginación para recuperar datos página por página.

🎊 ¡Y ya está! Hemos completado todo el flujo de visualización de los datos en la cuadrícula con los estados de carga entre ellos. Ahora veamos el código en acción. 👏 👏

PageState – GESTIÓN DE DATOS

Implementación completa de la aplicación Plasma está en el repositorio debajo. Viene con excelentes widgets de Jetpack Compose, como Gradient ProgressBar, Button, Text, State Based Transitions y mucho más. También se realizó con herramientas avanzadas de desarrollo de Android (MAD), como transmisiones, inicios de sesión, navegación, componentes de arquitectura, Jetpack Datastore y Dagger Hilt.

¡Gracias por leer! Haga clic en el botón y y compártalo para ayudar a otros solo si cree que vale la pena.

Incluya sugerencias, mejoras, ideas o preguntas en los comentarios.

¡Salud! y codificación feliz ✌️

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *