1
00:00:02,380 --> 00:00:08,860
Maintenant, dans la liste que nous rendons ici, nos éléments de liste sont aussi larges que la liste parce que nous enroulons la liste sur cette

2
00:00:10,090 --> 00:00:12,140
vue ici autour de notre vue de

3
00:00:12,140 --> 00:00:17,290
défilement, donc cela définit la largeur de la vue de défilement add qui définit la largeur de la articles là-dedans.

4
00:00:17,290 --> 00:00:22,330
Supposons maintenant que nous avions une largeur différente ici sur l'élément de liste, disons que la largeur d'un élément de liste ne

5
00:00:22,330 --> 00:00:24,330
devrait être que de 60% de la liste,

6
00:00:24,340 --> 00:00:30,760
donc ce n'est pas 100% qui est la valeur par défaut mais seulement 60%. Si nous faisons cela et que nous commençons, vous voyez maintenant

7
00:00:30,760 --> 00:00:35,570
que cela se trouve à gauche, ce qui est logique, le positionnement par défaut ici si

8
00:00:35,620 --> 00:00:42,400
vous définissez une largeur sur un élément qui est à l'intérieur d'une boîte flexible et que les éléments de liste sont à l'intérieur

9
00:00:42,400 --> 00:00:49,420
d'une boîte flexible parce que la vue de défilement en interne, utilise également flexbox à la fin, même s'il y a quelques différences par

10
00:00:49,600 --> 00:00:55,550
rapport à la flexbox normale et je reviendrai sur celles-ci, mais il utilise toujours flexbox et donc depuis que nous

11
00:00:55,580 --> 00:01:03,250
avons défini une largeur, la valeur par défaut d'étirement des éléments enfants le long de l'axe transversal et l'axe transversal serait l'axe horizontal car nous avons

12
00:01:03,250 --> 00:01:08,950
par défaut la colonne de direction flexible mais l'étirement par défaut est remplacé car nous avons une largeur sur

13
00:01:08,950 --> 00:01:14,890
notre élément de liste, donc sur nos éléments enfants. Maintenant, nous pourrions toujours vouloir centrer ces éléments

14
00:01:14,890 --> 00:01:20,620
dans la liste et pour cela, vous pouvez aller à la vue de défilement et y attribuer

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

16
00:01:21,430 --> 00:01:28,000
mais pas via l'accessoire de style que vous pouvez utiliser mais qui ne vous permet pas de styliser quoi que

17
00:01:28,000 --> 00:01:34,720
ce soit mais pour styliser le contenu dans une vue de défilement et appliquer par exemple des paramètres flex pour

18
00:01:34,720 --> 00:01:40,090
le contenu, vous devez utiliser le style de conteneur de contenu et c'est juste quelque chose

19
00:01:40,090 --> 00:01:47,260
à mémoriser ou à rechercher dans les documents officiels bien sûr. Pour la vue de défilement et pour FlatList, vous disposez de ce style de conteneur de contenu que

20
00:01:47,260 --> 00:01:50,140
vous utilisez pour contrôler la disposition à l'intérieur de cette vue de défilement.

21
00:01:50,230 --> 00:01:56,620
Maintenant, ici, sur ce style de conteneur de contenu, nous pouvons maintenant faire référence à la liste

22
00:01:56,620 --> 00:02:02,320
des styles et, par conséquent, permettez-moi de renommer en fait ce style de liste actuel

23
00:02:02,320 --> 00:02:06,670
que nous appliquons à cet habillage. est la liste elle-même.

24
00:02:06,670 --> 00:02:11,750
Alternativement, vous auriez pu nommer ce contenu de liste bien sûr, mais je vais simplement le nommer liste

25
00:02:11,750 --> 00:02:16,810
et renommer l'autre chose en conteneur de liste. Par conséquent, cela sera renommé en conteneur de liste

26
00:02:16,810 --> 00:02:21,700
et maintenant nous pouvons ajouter une nouvelle propriété de liste ici à la feuille de style et qui

27
00:02:21,760 --> 00:02:28,060
est maintenant à l'intérieur de la vue de défilement, styliser notre conteneur ou disposer notre contenu de conteneur pour être précis et là,

28
00:02:28,060 --> 00:02:34,750
car cela utilise flex box en interne, vous pouvez utiliser aligner les éléments pour contrôler l'alignement le long de l'axe transversal et le régler

29
00:02:34,810 --> 00:02:41,380
au centre et cela devrait maintenant vous assurer que les éléments sont à nouveau centrés au cas où ils seraient plus petits et c'est

30
00:02:41,380 --> 00:02:43,440
bien ce qui se passe ici.

31
00:02:43,510 --> 00:02:50,170
Donc, avec cela, vous savez comment contrôler et disposer le contenu à l'intérieur d'une

32
00:02:50,170 --> 00:02:58,660
vue de défilement ou d'une liste en général. Maintenant, que se passe-t-il si vous souhaitez également contrôler la flexbox le long de l'axe principal?

33
00:02:58,660 --> 00:03:06,520
Disons que notre liste ici ne devrait pas commencer juste en dessous de cette case ici avec nos commandes, mais un peu

34
00:03:06,520 --> 00:03:11,620
plus bas, elle devrait commencer au bas de l'écran, puis grimper en haut et ne

35
00:03:11,620 --> 00:03:14,500
faire défiler que lorsqu'elle atteint le Haut.

36
00:03:14,520 --> 00:03:21,590
Cela peut également être contrôlé avec notre style de liste qui est le style appliqué au style de conteneur de contenu, donc avec

37
00:03:21,590 --> 00:03:27,350
ce style de conteneur de contenu, vous pouvez également contrôler cela en ajoutant justificationContenu parce que justifier le

38
00:03:27,350 --> 00:03:33,440
contenu vous permet de positionner le contenu le long de l'axe principal de la boîte flexible et L'axe principal

39
00:03:33,440 --> 00:03:38,430
de Flexbox est par défaut l'axe vertical car la direction par défaut est la colonne.

40
00:03:38,600 --> 00:03:45,410
Donc ici, utilisons maintenant flex end au lieu de la valeur par défaut qui est flex start et flex end devrait maintenant déplacer les éléments

41
00:03:45,410 --> 00:03:47,350
vers la fin de la liste.

42
00:03:47,360 --> 00:03:48,740
Voyons donc si cela

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

44
00:03:50,570 --> 00:03:52,590
hein, ne semble pas fonctionner, non?

45
00:03:52,610 --> 00:03:59,670
Le problème ici est que la vue de défilement ne fait que développer cette vue interne qu'elle enveloppe à la fin lorsque de nouveaux

46
00:03:59,670 --> 00:04:01,360
éléments sont ajoutés, nous voulons

47
00:04:01,370 --> 00:04:06,310
maintenant que cette vue interne se développe automatiquement. Sur une vue normale, nous

48
00:04:06,320 --> 00:04:08,800
y parviendrions en ajoutant flex one.

49
00:04:08,990 --> 00:04:14,170
Essayons donc ceci ici sur cette liste de styles que nous ajoutons également à la vue de défilement.

50
00:04:14,180 --> 00:04:21,570
Si nous l'ajoutons ici, maintenant vous voyez que cela se comporte correctement, cela commence ici en bas et maintenant développons cela et espérons

51
00:04:21,600 --> 00:04:23,860
que nous ne le résoudrons pas

52
00:04:24,450 --> 00:04:32,870
trop tôt et vous voyez, nous pouvons faire défiler. Donc, cela se développe et fonctionne exactement comme nous le souhaitons. Il peut défiler et fonctionne généralement comme

53
00:04:32,890 --> 00:04:39,000
nous le souhaitons, mais vous remarquerez que vous ne pouvez pas vraiment le faire défiler de telle

54
00:04:39,000 --> 00:04:45,420
sorte que vous voyez toujours l'élément le plus récent. Vous pouvez y faire défiler, mais cela revient en arrière et ce n'est

55
00:04:45,420 --> 00:04:48,270
probablement pas ce que nous voulons, sur Android, cela ne fonctionne

56
00:04:48,270 --> 00:04:50,370
pas non plus. Là, si

57
00:04:50,370 --> 00:04:53,340
nous commençons maintenant à deviner, vous verrez le

58
00:04:53,340 --> 00:04:59,110
même comportement, eh bien si j'y arriverais, là la seule différence est qu'il est cassé pour une

59
00:04:59,140 --> 00:05:05,320
raison différente, je ne peux même pas faire défiler. Donc, Flex One ne fait pas vraiment le travail, ce que vous pouvez utiliser à la

60
00:05:05,320 --> 00:05:11,170
place est quelque chose que nous n'avons pas utilisé auparavant et c'est Flex Grow. Maintenant, Flex Grow s'assure également que l'élément

61
00:05:11,230 --> 00:05:17,230
auquel vous l'ajoutez grandit et occupe autant d'espace que possible, tout comme Flex One, la

62
00:05:17,230 --> 00:05:23,150
différence est que Flex Grow fonctionne un peu différemment en interne, il est plus

63
00:05:23,260 --> 00:05:26,250
flexible que Flex. Flex dit simplement de

64
00:05:26,290 --> 00:05:32,050
prendre tout l'espace disponible dans toutes les directions que vous pouvez obtenir, flex Grow indique essentiellement au

65
00:05:32,050 --> 00:05:38,980
conteneur de pouvoir grandir, de pouvoir prendre autant d'espace que possible et il le fera, mais il conserve l'autre comportement

66
00:05:38,980 --> 00:05:39,580
qu'il

67
00:05:39,780 --> 00:05:45,280
a normalement, dans ce cas de la vue de défilement, où cela peut défiler et peut

68
00:05:45,310 --> 00:05:47,300
également dépasser les limites de l'écran.

69
00:05:47,320 --> 00:05:53,080
C'est donc un peu plus flexible et vous n'en avez probablement pas besoin si souvent sur une vue normale mais sur une

70
00:05:53,080 --> 00:05:54,720
vue de défilement, c'est exactement ce dont

71
00:05:54,820 --> 00:06:00,340
nous avons besoin et je le montre juste ici parce que c'est un cas spécial que vous n'avez qu'à savez ou

72
00:06:00,340 --> 00:06:01,680
que vous pourriez trébucher

73
00:06:01,760 --> 00:06:07,420
et généralement vous trouvez ensuite des solutions sur le débordement de pile et ainsi de suite, ici vous le trouverez dans ce

74
00:06:07,660 --> 00:06:12,520
cours parce que c'est un scénario que vous pourriez rencontrer et donc, espérons-le, vous pouvez ensuite rappeler cette

75
00:06:12,520 --> 00:06:14,140
conférence et voir comment résoudre cela.

76
00:06:14,170 --> 00:06:20,410
J'ai donc ajouté flex Grow à cette propriété de liste et essayons maintenant. Ici, sur iOS, si nous commençons à deviner

77
00:06:20,530 --> 00:06:30,520
des nombres ici, vous voyez maintenant que je peux réellement faire défiler de manière à ce que le dernier élément soit visible et je peux toujours faire défiler de manière

78
00:06:30,610 --> 00:06:33,750
à ce que l'élément le plus ancien soit visible, alors

79
00:06:33,760 --> 00:06:37,620
maintenant cela montre le comportement que nous voulons, merci pour fléchir grandir.

80
00:06:37,750 --> 00:06:41,480
Et sur Android, ce sera la même chose si nous commençons un jeu là-bas,

81
00:06:45,510 --> 00:06:52,140
vous voyez maintenant je peux faire défiler cela ici aussi et je peux voir à la fois la supposition la plus récente et la plus ancienne.

82
00:06:52,200 --> 00:06:58,860
Donc, cela fonctionne maintenant comme il le devrait ici sur Android et iOS et je montrais tout cela simplement pour que vous soyez

83
00:06:59,070 --> 00:07:05,490
au courant de ces modèles, de ce style de conteneur de contenu spécial en mode défilement et je voulais également m'assurer que

84
00:07:05,670 --> 00:07:09,960
vous connaissiez certains des problèmes que vous pouvez rencontrer lorsque vous commencez à styliser lis

85
00:07:09,960 --> 00:07:15,180
tsand lorsque vous souhaitez y ajouter votre propre mise en page, alors voici quelques astuces qui peuvent être

86
00:07:15,180 --> 00:07:18,510
très utiles si vous rencontrez cette situation dans votre application.