Diseño de pantalla con grid de categorías

En este tutorial, explicaremos como hacer una sección de categorías con scroll dentro de una pantalla. El resultado seria el siguiente:

Diseño:
Agrega un contenedor que tenga el 100% de ancho, de alto pueden ser los pixeles que tu consideres, yo recomiendo que sean más del 20% de tu pantalla principal.

Realiza el diseño de tu ficha (Que va a contener la categoría), el diseño puede ser como tu prefieras, lo único que debes respetar y es muy importante  que el ancho no esté en % (porcentaje) si no en pixeles, como se muestra en la imagen. A lo alto sí puedes colocar en porcentaje.

 No olvides colocar un nombre identificable tanto al texto de tu categoría como a la imagen.

Función:
Recuerda crear en tu base de datos la colección “Categorías”

*Sí quieres mostrar las categorías más importantes, o algunas categorías que consideres a especie de resumen, es importante agregar el campo “Índice” como se muestra en la imagen y enlistarlas.

En el Onload de tu pantalla agrega la función > Get database data

En esta ocasión quiero que se muestren las categorías filtradas por el índice que hicimos previamente y que muestre únicamente las primeras 4. (Esto es opcional)

Vas a seleccionar el botón azul (Open database browser) y vas a elegir tu colección “Categoría”, y vamos a salir de esta ventana.

En los callbacks > Data Obtained vas a agregar una función de Add collections to UI (Para crear la lista de categorías)

En tu Entry Vars > List data vas a agregar el PreviusOutputs > Get database data

Y activaremos el switch de Enable horizontal

Ahora tendrás que darle click al botón azul “Modify elements” > Elige el contenedor con la distribución que corresponde a categorías.

En List data vas a elegir el elemento “Imagen” > Control property > src > Y en la última opción (ListContext) vas a colocar el Atributo a sustituir (Igual que en tu base de datos), en este caso es Imagen

Lo mismo con el texto, eligiendo el Control property > text

Y listo, con esto tendrás un grid para tus categorías.

Salir de la versión móvil