Ahora en la lista que representamos aquí, nuestros elementos de lista son tan anchos como la lista porque estamos ajustando la lista en esta vista aquí
alrededor de nuestra vista de desplazamiento, por
lo tanto, esto establece el ancho de la vista de desplazamiento que establece el ancho de la vista artículos allí.
Ahora supongamos que tenemos un ancho diferente aquí en el elemento de la lista, digamos que el ancho de un elemento de la lista
debe ser solo el 60% de la lista, por
lo que no es el 100%, que es el valor predeterminado, sino solo el 60%. Si hacemos eso y comenzamos, verá que esto se ubica
a la izquierda, lo que tiene sentido, el posicionamiento predeterminado aquí si establece un ancho
en un elemento que está dentro de una caja flexible y los elementos de la lista están dentro de una caja flexible
porque la vista de desplazamiento internamente también usa flexbox al final, a pesar de que hay algunas diferencias en comparación con el flexbox
normal y volveré a ellas, pero aún usa flexbox y, por lo tanto, dado que establecemos un ancho, el
valor predeterminado es estirar elementos secundarios a lo largo del eje transversal y el eje transversal sería el eje horizontal porque tenemos la columna de
dirección de flexión predeterminada, pero el estiramiento predeterminado se anula porque tenemos un ancho en nuestro elemento de
la lista, así como en nuestros elementos secundarios. Sin embargo, es posible que aún deseemos centrar
estos elementos en la lista y para esto, puede ir a la vista de desplazamiento y
asignar un
estilo allí, aunque no a través del accesorio de estilo que puede usar pero que no le permite darle
estilo a nada pero para diseñar el contenido en una vista de desplazamiento y aplicar, por ejemplo, configuraciones flexibles
para el contenido, debe usar el estilo del contenedor de contenido y eso es algo
para memorizar o buscar en los documentos oficiales, por supuesto. Para la vista de desplazamiento y para FlatList, tiene ese estilo de contenedor de contenido
que utiliza para controlar el diseño dentro de esa vista de desplazamiento.
Ahora, aquí en ese estilo de contenedor de contenido, ahora podemos referirnos a la lista de estilos y, por lo tanto,
permítanme cambiar el nombre de este estilo de lista actual que estamos aplicando a esa vista envolvente, porque al
final es un contenedor alrededor de nuestra lista y aquí es la lista misma
Alternativamente, podría haber nombrado el contenido de esta lista, por supuesto, pero solo lo nombraré lista y cambiaré el nombre
de la otra cosa al contenedor de la lista. Por lo tanto, esto cambiará su nombre a contenedor
de lista y ahora podemos agregar una nueva propiedad de lista aquí a la hoja de estilo y
eso ahora está dentro de la vista de desplazamiento, diseñar nuestro contenedor o diseñar el contenido del contenedor para que sea preciso
y listo, ya que esto usa internamente, puede usar elementos de alineación para controlar la alineación a lo largo del eje transversal y establecer
esto en el centro y esto debería asegurarse de que los elementos estén centrados nuevamente en caso de que sean más pequeños y eso
es lo que está sucediendo aquí.
Entonces, con eso, sabe cómo controlar y diseñar el contenido dentro de una vista
de desplazamiento o de una lista en general. Ahora, ¿qué pasa si también quieres controlar el flexbox a lo largo del eje principal?
Digamos que nuestra lista aquí en realidad no debería comenzar justo debajo de este cuadro aquí con nuestros controles, sino un poco más abajo, debería
comenzar en la parte inferior de la pantalla y luego crecer hasta la parte superior y
luego solo desplazarse cuando llegue al parte superior.
Esto también se puede controlar con nuestro estilo de lista, que es el estilo aplicado al estilo de contenedor de contenido, por
lo que con este estilo de contenedor de contenido, también puede controlar esto agregando justifyContent porque justify
content le permite posicionar el contenido a lo largo del eje principal del flexbox y El eje principal de
flexbox por defecto es el eje vertical porque la dirección predeterminada es la columna.
Así que aquí, ahora usemos el extremo flexible en lugar del predeterminado, que es el inicio flexible y el final flexible ahora debería mover los
elementos al final de la lista.
Entonces, veamos si
eso
funciona, ¿no parece funcionar, verdad?
El problema aquí es que la vista de desplazamiento solo aumenta esta vista interna que se ajusta al final cuando se
agregan nuevos elementos, ahora
queremos que esa vista interna crezca automáticamente. En una vista normal,
lo lograríamos agregando flex one.
Intentemos esto aquí en este estilo de lista que agregamos también a la vista de desplazamiento.
Si lo agregamos aquí, ahora verá que esto se comporta correctamente, comienza aquí en la parte inferior y ahora vamos a
crecer esto y esperamos que no
lo resolvamos demasiado pronto y verá, podemos desplazarnos. Entonces esto en realidad está creciendo y funciona exactamente de la manera que queremos. Es desplazable y generalmente funciona de
la manera que queremos, pero notará que en realidad no puede desplazarse de manera tal
que siempre vea el elemento más reciente. Puede desplazarse hasta allí, pero luego salta hacia arriba y
eso probablemente no sea lo que queremos, en Android,
tampoco funciona. Allí, si
ahora comenzamos a adivinar, verás el mismo
comportamiento, bueno, si yo llegara allí, la única diferencia es que está roto por
una razón diferente, ni siquiera puedo desplazarme. Así que flex one realmente no hace el trabajo, lo que puedes usar allí
es algo que no hemos usado antes y eso es flex grow. Ahora flex grow también asegúrate de que el
elemento al que agregues esto crezca y ocupe todo el espacio que pueda, al igual que flex
one, la diferencia es que flex grow funciona de manera un poco diferente internamente, es más
flexible que flex. Flex simplemente dice que
tome todo el espacio disponible en todas las direcciones que pueda obtener, flex grow básicamente instruye al
contenedor para que pueda crecer, para poder tomar tanto espacio como pueda y lo hará, pero mantiene el otro comportamiento que
tiene
normalmente, en este caso de la vista de desplazamiento, donde se puede desplazar y también puede
exceder los límites de la pantalla.
Por lo tanto, es un poco más flexible y probablemente no lo necesite tan a menudo en una vista normal, pero
en una vista de desplazamiento, es
exactamente lo que necesitamos y solo lo estoy mostrando aquí porque este es un caso especial que solo tiene que
sabe o con qué
tropezaría y, por lo general, encontrará soluciones en el desbordamiento de pila y así sucesivamente, aquí lo encontrará en este curso
porque es un escenario que puede encontrar y, por lo tanto, con suerte, puede recordar esta conferencia
y ver cómo resuelve esto.
Así que agregué flex grow a esa propiedad de la lista y ahora vamos a intentarlo de nuevo. Aquí en iOS, si comenzamos a adivinar
números aquí, ahora puede ver que realmente puedo desplazarme de modo que el último elemento sea visible y todavía puedo desplazarme de modo que el
elemento más antiguo sea visible, así que ahora
esto muestra el comportamiento que queremos, gracias para flexionar crecer.
Y en Android, será lo mismo si comenzamos un juego
allí, ya ves, también puedo desplazar esto aquí y puedo ver tanto la suposición más reciente como la más antigua.
Así que ahora está funcionando de la forma en que debería hacerlo en Android e iOS y estaba mostrando todo esto simplemente para
que conozca estos patrones, este estilo especial de contenedor de contenido en la vista de desplazamiento y también quería asegurarme de que
usted eran conscientes de algunos de los problemas con los que se puede encontrar cuando
comienza a diseñar estilos y cuando desea agregar su propio diseño allí, estos son algunos trucos que pueden
ser muy útiles si encuentra esa situación en su aplicación.