Es momento de ver otro widget muy importante en cualquier aplicación que trabaje con listas y es el
View Builder.
Para eso hay que crearse un nuevo widget o mejor dicho una nueva página.
Vamos a ponerle Live View y un bajo Ph.D Art Center.
Creemos m y aquí vamos a manejarlo con un stays full también esté full TAP.
Se va a llamar lista lista Patch ahí está esté todo lo demás.
Voy a grabar los cambios acá definamos un par de cosas antes de llamarlo como él es CAFO CAFO Tocoma
vamos a poner su Abar de tipo habar con su título Tex que se llame listas O veámoslo como listas.
Este View Builder me va a ayudar a mí a trabajar con lo que es el refrigera también para hacer un infinite
scroll y otras cosas que vamos a ver en los próximos videos por los momentos quiero empezar a crear
la página para trabajar aquí dentro del escaño en el body.
Voy a colocar el crear vistas a un elemento para crear el LISMI Builder.
Por el momento sólo coloquemos un texto un texto que diga listas nada del otro mundo simplemente acabo
de crear mi página ahora en el menú Options.
Ahora sí voy a crearme la entrada acá.
Aquí faltó una coma.
La ruta va a ser Liz list.
Podemos dejarle o stylist hoy con vaser List y aquí coloquemos listas y scroll.
Eso es lo que vamos a hacer básicamente acá son varios ejercicios grabamos los cambios tenemos que implementar
el icono cerró el menú Hobson vamos a las utilidades creo.
Este es el mismo ya lo habíamos implementado aquí en la clase pasada por accidente.
Sólo lo revisamos que esté bien cierro y me falta la ruta la ruta prácticamente va a ser la lista para
un par de espacios y aquí va a ser lista Perich.
Vamos a ver como le puse lista Peach.
Perfecto entonces otro punto como un punto hay que importar el archivo.
Lo voy a colocar aquí abajo grabo los cambios cierro y deberíamos detener nuestra lista hoy.
Ok perfecto puedo hacer clic en ella y llego a la página de las listas.
Excelente.
Trabajemos un poco con el diseño.
Creamos un método que regresa un widget llamado crear lista.
Es un método privado por eso el guión bajo paréntesis abre y cierra llaves.
Aquí es widget.
Este crear lista lo voy a llamar aquí directamente en el body.
Por qué.
Por qué pronto en los siguientes videos voy a colocar otras cosas otras funcionalidades a esta página
y serán otros widgets directamente en el voy pero por eso lo voy a crear aquí abajo.
Ese crear lista tiene que regresar el List View Pyle para eso lista View punto Builder List View Builder
punto y coma.
Aquí presionemos son Enter.
Voy a bajar un poco y dejo el mouse encima.
Si vemos el LISMI Builder tiene este montón de opciones y hay unas cosas que son requeridas como por
ejemplo el item Builder es necesario es el método que se va a encargar de redibujar los elementos que
se encuentran dentro de esta lista es decir el INS View Builder se va a encargar de renderizar los elementos
conforme sean necesarios.
Eso es necesario si ustedes no saben cuántos elementos tienen en su página o si son muchos elementos
los que va a tener contenidos o que van a estar dentro de este licio.
Antes de comenzar definamos nuestra lista de elementos que yo quiero mostrar.
Si bien es cierto que van a ser dinámicos por lo menos quiero información por defecto vamos a crearnos
nuestra lista son una lista de enteros que se va a llamar un bajo lista números y lo inicializar con
uno dos tres cuatro cinco coma cinco números perfecto.
Esta lista de números va a ser requerida para poder decirle a Liz Builder qué es lo que tienen que crear.
Cuántos elementos y toda la cosa esa lista de números es la que yo de alguna manera voy a asociar con
el desvio Builder para que conforme vaya creciendo esa lista vayan creciendo los elementos dentro del
diseño.
Para eso voy a ocupar un par de cosas como por ejemplo el ítem Cat es decir cuántos elementos tiene
esta lista.
En este preciso instante y eso lo sé mediante la lista números punto length o sea el largo de que elementos
que estén contenidos en ese arreglo o en esa lista es la cantidad de ítems que yo tengo en ese elemento.
Otra propiedad indispensable es el Aitken Builder.
Entonces Heute Builder y recuerden que cuando ustedes miren la palabra Builder en flogger significa
la forma como se va a dibujar ese elemento o ese Willett.
Básicamente suits parentesis y abrir y cerrar llaves si dejan el mouse encima del Builder se va a dar
cuenta que esto recibe un contexto o perdón un vil contexto.
Y luego tenemos el Hint éste es la posición índice del elemento que está creando en ese instante.
Por ejemplo si estamos en el primero sería un cero si estamos en la segunda posición sería un 1 por
qué la lista Sendak empiezan en base 0.
Entonces vamos a ocupar acá el Bildt context se va a llamar context Koma y aquí tendríamos un Hint Index
o Hanóver que ustedes quieran darle.
Noten que se está creando el contexto en este momento se es parte del método no lo estoy enviando como
argumento lo estoy creando ahí.
Entonces lo que seguiría es hacer un retorno y qué hacemos acá.
Qué podemos hacer.
Yo quiero desplegar unas imágenes y hay un servicio muy bonito que se llama Pixiv.
Déjeme mostrárselos no hace falta que vengamos a esta dirección pero aquí el PIC sum es un servicio
web que les permite a ustedes trabajar con imágenes así como de relleno o imágenes que pueden utilizar
para hacer demostraciones y es exactamente lo que yo necesito.
Hay varias funciones interesantes como por ejemplo voy a copiar todo este código que está acá de Random
Image lo pego y eso me genera una imagen aleatoria no es aleatoria.
Realmente tienen un montón de imágenes en su servidor y van a regresar la imagen 13 de su base de datos
con esta dimensiones que yo estoy especificando yo voy a trabajar con 500 por 300 y presionó enter y
está la imagen.
Ahora el número este que está aquí adentro yo lo voy a cambiar por el 1 2 3 4 5 6 7 y así sucesivamente.
No sé cuántas imágenes hoy podríamos ver la documentación pero esta es la imagen que yo quiero mostrar.
Regresemos a nuestra aplicación y lo que voy a usar acá es un Feith y imatge.
Y por qué un fair match.
Porque como la imagen la tengo que cargar de un recurso externo lo mejor es usar este tipo de imágenes
para tener un loading la imagen que voy a colocar va a ser un network Image y el R.L es el siguiente.
Ok déjeme mostrárselos completamente.
Es este de acá pero en lugar de este 2 yo no necesito mandar el 2 podría mandar la posición indie índex
perdón el indexada pero eso siempre haría que las imágenes sean las mismas en base al Indec.
No quiero hacerlo quiero ser en base a la imagen que yo tengo acá en el arreglo por ejemplo el 1 2 3
4 5.
Puede ser que no exista una imagen cero pero yo lo voy a hacer así.
Voy a crearme una propiedad una variable final llamada imagen que va a ser igual a lista de números
en su posición índex.
Por qué lo estoy haciendo así porque quiero la posición 1 2 3 4 5 si quiero el número que tenga dentro
de esta lista es decir si yo tengo el 10 20 quiero esas imágenes no quiero la posición índex quiero
el valor de la imagen ahora esta imagen contiene el valor de cada una de esas posiciones de mi lista
y es lo que voy a poner acá.
Perfecto.
Aquí viene una coma noventa Pleiss Holder y ustedes ya saben que lo que vamos a hacer acá tenemos assets
y Mazz y aquí tenemos assets Slash Yar menos loading .15 que es la imagen que hemos cargado y hemos
estado trabajando desde hace rato la tenemos aquí.
Voy a grabar los cambios y vamos a ver qué pasa qué vamos a ver qué pasa a ver los cambios un saber
que está el body tuvo que verse renderizado nuevamente.
Ok vista empieza a cargar las imágenes llegó hasta el final que está haciendo scroll y ahí están las
5 imágenes.
Ahora lo interesante sería Qué pasa si ahora Cargol las siguientes.
Hay varias formas de hacerlo.
Una sería que cuando ya estamos trabajando con el elemento 5 o la última posición del arreglo mandar
a traer o rellenar automáticamente las siguientes 5 imágenes pero yo creo conveniente controlar el scroll
de esta página es decir cuando yo estoy aquí al final del scroll cargar los siguientes registros o cuando
yo hago un pull poder hacer un refresh y cargar nuevamente las últimas cinco imágenes que tenía en la
lista.
Eso va a ser un ejercicio un poco más interesante.
Lo vamos a dejar así y continuamos con el siguiente video.
Básicamente esto es nuestro Livio Vilda.