1
00:00:02,380 --> 00:00:08,860
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í

2
00:00:10,090 --> 00:00:12,140
alrededor de nuestra vista de desplazamiento, por

3
00:00:12,140 --> 00:00:17,290
lo tanto, esto establece el ancho de la vista de desplazamiento que establece el ancho de la vista artículos allí.

4
00:00:17,290 --> 00:00:22,330
Ahora supongamos que tenemos un ancho diferente aquí en el elemento de la lista, digamos que el ancho de un elemento de la lista

5
00:00:22,330 --> 00:00:24,330
debe ser solo el 60% de la lista, por

6
00:00:24,340 --> 00:00:30,760
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

7
00:00:30,760 --> 00:00:35,570
a la izquierda, lo que tiene sentido, el posicionamiento predeterminado aquí si establece un ancho

8
00:00:35,620 --> 00:00:42,400
en un elemento que está dentro de una caja flexible y los elementos de la lista están dentro de una caja flexible

9
00:00:42,400 --> 00:00:49,420
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

10
00:00:49,600 --> 00:00:55,550
normal y volveré a ellas, pero aún usa flexbox y, por lo tanto, dado que establecemos un ancho, el

11
00:00:55,580 --> 00:01:03,250
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

12
00:01:03,250 --> 00:01:08,950
dirección de flexión predeterminada, pero el estiramiento predeterminado se anula porque tenemos un ancho en nuestro elemento de

13
00:01:08,950 --> 00:01:14,890
la lista, así como en nuestros elementos secundarios. Sin embargo, es posible que aún deseemos centrar

14
00:01:14,890 --> 00:01:20,620
estos elementos en la lista y para esto, puede ir a la vista de desplazamiento y

15
00:01:20,620 --> 00:01:21,430
asignar un

16
00:01:21,430 --> 00:01:28,000
estilo allí, aunque no a través del accesorio de estilo que puede usar pero que no le permite darle

17
00:01:28,000 --> 00:01:34,720
estilo a nada pero para diseñar el contenido en una vista de desplazamiento y aplicar, por ejemplo, configuraciones flexibles

18
00:01:34,720 --> 00:01:40,090
para el contenido, debe usar el estilo del contenedor de contenido y eso es algo

19
00:01:40,090 --> 00:01:47,260
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

20
00:01:47,260 --> 00:01:50,140
que utiliza para controlar el diseño dentro de esa vista de desplazamiento.

21
00:01:50,230 --> 00:01:56,620
Ahora, aquí en ese estilo de contenedor de contenido, ahora podemos referirnos a la lista de estilos y, por lo tanto,

22
00:01:56,620 --> 00:02:02,320
permítanme cambiar el nombre de este estilo de lista actual que estamos aplicando a esa vista envolvente, porque al

23
00:02:02,320 --> 00:02:06,670
final es un contenedor alrededor de nuestra lista y aquí es la lista misma

24
00:02:06,670 --> 00:02:11,750
Alternativamente, podría haber nombrado el contenido de esta lista, por supuesto, pero solo lo nombraré lista y cambiaré el nombre

25
00:02:11,750 --> 00:02:16,810
de la otra cosa al contenedor de la lista. Por lo tanto, esto cambiará su nombre a contenedor

26
00:02:16,810 --> 00:02:21,700
de lista y ahora podemos agregar una nueva propiedad de lista aquí a la hoja de estilo y

27
00:02:21,760 --> 00:02:28,060
eso ahora está dentro de la vista de desplazamiento, diseñar nuestro contenedor o diseñar el contenido del contenedor para que sea preciso

28
00:02:28,060 --> 00:02:34,750
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

29
00:02:34,810 --> 00:02:41,380
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

30
00:02:41,380 --> 00:02:43,440
es lo que está sucediendo aquí.

31
00:02:43,510 --> 00:02:50,170
Entonces, con eso, sabe cómo controlar y diseñar el contenido dentro de una vista

32
00:02:50,170 --> 00:02:58,660
de desplazamiento o de una lista en general. Ahora, ¿qué pasa si también quieres controlar el flexbox a lo largo del eje principal?

33
00:02:58,660 --> 00:03:06,520
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

34
00:03:06,520 --> 00:03:11,620
comenzar en la parte inferior de la pantalla y luego crecer hasta la parte superior y

35
00:03:11,620 --> 00:03:14,500
luego solo desplazarse cuando llegue al parte superior.

36
00:03:14,520 --> 00:03:21,590
Esto también se puede controlar con nuestro estilo de lista, que es el estilo aplicado al estilo de contenedor de contenido, por

37
00:03:21,590 --> 00:03:27,350
lo que con este estilo de contenedor de contenido, también puede controlar esto agregando justifyContent porque justify

38
00:03:27,350 --> 00:03:33,440
content le permite posicionar el contenido a lo largo del eje principal del flexbox y El eje principal de

39
00:03:33,440 --> 00:03:38,430
flexbox por defecto es el eje vertical porque la dirección predeterminada es la columna.

40
00:03:38,600 --> 00:03:45,410
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

41
00:03:45,410 --> 00:03:47,350
elementos al final de la lista.

42
00:03:47,360 --> 00:03:48,740
Entonces, veamos si

43
00:03:49,870 --> 00:03:50,480
eso

44
00:03:50,570 --> 00:03:52,590
funciona, ¿no parece funcionar, verdad?

45
00:03:52,610 --> 00:03:59,670
El problema aquí es que la vista de desplazamiento solo aumenta esta vista interna que se ajusta al final cuando se

46
00:03:59,670 --> 00:04:01,360
agregan nuevos elementos, ahora

47
00:04:01,370 --> 00:04:06,310
queremos que esa vista interna crezca automáticamente. En una vista normal,

48
00:04:06,320 --> 00:04:08,800
lo lograríamos agregando flex one.

49
00:04:08,990 --> 00:04:14,170
Intentemos esto aquí en este estilo de lista que agregamos también a la vista de desplazamiento.

50
00:04:14,180 --> 00:04:21,570
Si lo agregamos aquí, ahora verá que esto se comporta correctamente, comienza aquí en la parte inferior y ahora vamos a

51
00:04:21,600 --> 00:04:23,860
crecer esto y esperamos que no

52
00:04:24,450 --> 00:04:32,870
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

53
00:04:32,890 --> 00:04:39,000
la manera que queremos, pero notará que en realidad no puede desplazarse de manera tal

54
00:04:39,000 --> 00:04:45,420
que siempre vea el elemento más reciente. Puede desplazarse hasta allí, pero luego salta hacia arriba y

55
00:04:45,420 --> 00:04:48,270
eso probablemente no sea lo que queremos, en Android,

56
00:04:48,270 --> 00:04:50,370
tampoco funciona. Allí, si

57
00:04:50,370 --> 00:04:53,340
ahora comenzamos a adivinar, verás el mismo

58
00:04:53,340 --> 00:04:59,110
comportamiento, bueno, si yo llegara allí, la única diferencia es que está roto por

59
00:04:59,140 --> 00:05:05,320
una razón diferente, ni siquiera puedo desplazarme. Así que flex one realmente no hace el trabajo, lo que puedes usar allí

60
00:05:05,320 --> 00:05:11,170
es algo que no hemos usado antes y eso es flex grow. Ahora flex grow también asegúrate de que el

61
00:05:11,230 --> 00:05:17,230
elemento al que agregues esto crezca y ocupe todo el espacio que pueda, al igual que flex

62
00:05:17,230 --> 00:05:23,150
one, la diferencia es que flex grow funciona de manera un poco diferente internamente, es más

63
00:05:23,260 --> 00:05:26,250
flexible que flex. Flex simplemente dice que

64
00:05:26,290 --> 00:05:32,050
tome todo el espacio disponible en todas las direcciones que pueda obtener, flex grow básicamente instruye al

65
00:05:32,050 --> 00:05:38,980
contenedor para que pueda crecer, para poder tomar tanto espacio como pueda y lo hará, pero mantiene el otro comportamiento que

66
00:05:38,980 --> 00:05:39,580
tiene

67
00:05:39,780 --> 00:05:45,280
normalmente, en este caso de la vista de desplazamiento, donde se puede desplazar y también puede

68
00:05:45,310 --> 00:05:47,300
exceder los límites de la pantalla.

69
00:05:47,320 --> 00:05:53,080
Por lo tanto, es un poco más flexible y probablemente no lo necesite tan a menudo en una vista normal, pero

70
00:05:53,080 --> 00:05:54,720
en una vista de desplazamiento, es

71
00:05:54,820 --> 00:06:00,340
exactamente lo que necesitamos y solo lo estoy mostrando aquí porque este es un caso especial que solo tiene que

72
00:06:00,340 --> 00:06:01,680
sabe o con qué

73
00:06:01,760 --> 00:06:07,420
tropezaría y, por lo general, encontrará soluciones en el desbordamiento de pila y así sucesivamente, aquí lo encontrará en este curso

74
00:06:07,660 --> 00:06:12,520
porque es un escenario que puede encontrar y, por lo tanto, con suerte, puede recordar esta conferencia

75
00:06:12,520 --> 00:06:14,140
y ver cómo resuelve esto.

76
00:06:14,170 --> 00:06:20,410
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

77
00:06:20,530 --> 00:06:30,520
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

78
00:06:30,610 --> 00:06:33,750
elemento más antiguo sea visible, así que ahora

79
00:06:33,760 --> 00:06:37,620
esto muestra el comportamiento que queremos, gracias para flexionar crecer.

80
00:06:37,750 --> 00:06:41,480
Y en Android, será lo mismo si comenzamos un juego

81
00:06:45,510 --> 00:06:52,140
allí, ya ves, también puedo desplazar esto aquí y puedo ver tanto la suposición más reciente como la más antigua.

82
00:06:52,200 --> 00:06:58,860
Así que ahora está funcionando de la forma en que debería hacerlo en Android e iOS y estaba mostrando todo esto simplemente para

83
00:06:59,070 --> 00:07:05,490
que conozca estos patrones, este estilo especial de contenedor de contenido en la vista de desplazamiento y también quería asegurarme de que

84
00:07:05,670 --> 00:07:09,960
usted eran conscientes de algunos de los problemas con los que se puede encontrar cuando

85
00:07:09,960 --> 00:07:15,180
comienza a diseñar estilos y cuando desea agregar su propio diseño allí, estos son algunos trucos que pueden

86
00:07:15,180 --> 00:07:18,510
ser muy útiles si encuentra esa situación en su aplicación.