Desplazamiento automático anidado para listas basadas en secciones con Jetpack Compose | de Heba Mekawi | julio 2022

Foto de Nathana Rebouças en UnsplashMostrar los elementos del menú en varias aplicaciones de alimentos y bebidas es uno de los mejores casos de uso para las interacciones de listas múltiples. Vamos a crear una implementación simple usando Jetpack Compose 🚀Cubriremos todo lo siguiente:

• Mostrar una lista de elementos de menú etiquetados por sección
• Mostrar lista de secciones y resaltar la seleccionada
• Mientras se desplaza por la lista de elementos del menú, resalte la lista de secciones con la sección que se muestra
• Al hacer clic en el nombre de la sección, se salta a la posición de la sección de la lista de elementos del menú.

Mostrar una lista de elementos de menú etiquetados por sección

Esta es una lista simple de todos los elementos del menú etiquetados e indexados por títulos de sección.

• elementosListState es un LazyListState que se usa para manejar el desplazamiento automático, que se discutirá más adelante
• enPostScroll Se utiliza para detectar una acción de desplazamiento en la lista de elementos de menú llamados por Desplazamiento anidado modificador

Y este es MenuItemView, solo una vista simple para mostrar los elementos de la sección:

Mostrar lista de secciones y resaltar la seleccionada

Esta es una lista simple para mostrar los títulos de las secciones en una fila y utilizó SectionTextView para mostrar y resaltar la sección seleccionada: SectionTextView también muestra un subrayado del elemento de la sección seleccionada, el ancho del subrayado ancho del texto siempre debe coincidir con el tamaño del texto que se medirá en Posicionado a nivel mundial Modificador:

Mientras se desplaza por la lista de elementos del menú, resalte la lista de secciones con la sección que se muestra

La vista principal principal que maneja ambas interacciones de lista es MenuView. Contiene la selección actual y maneja el evento onPostScroll desde la vista de lista de elementos del menú.

• Actualizar el índice de la sección seleccionada
• Desplácese por la lista de secciones hasta la posición del título de la sección seleccionada

Al hacer clic en el nombre de la sección, se salta a la posición de la lista de los elementos del menú de la sección.

vista de menú también maneja el evento de clic para el título de la sección

• Actualizar el índice de la sección seleccionada
• Desplácese por la lista de elementos hasta la ubicación de la sección seleccionada
• Desplácese por la lista de secciones hasta la posición del título de la sección seleccionada

Finalmente el MenuView será así: ¡Eso es todo! ¡Lo hiciste! 💪 ¿Ves que falta algo? ¡por favor comenta! Gracias por leer, hasta el próximo artículo 😊