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
vue ici autour de notre vue de
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.
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
devrait être que de 60% de la liste,
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
que cela se trouve à gauche, ce qui est logique, le positionnement par défaut ici si
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
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
rapport à la flexbox normale et je reviendrai sur celles-ci, mais il utilise toujours flexbox et donc depuis que nous
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
par défaut la colonne de direction flexible mais l'étirement par défaut est remplacé car nous avons une largeur sur
notre élément de liste, donc sur nos éléments enfants. Maintenant, nous pourrions toujours vouloir centrer ces éléments
dans la liste et pour cela, vous pouvez aller à la vue de défilement et y attribuer
un style,
mais pas via l'accessoire de style que vous pouvez utiliser mais qui ne vous permet pas de styliser quoi que
ce soit mais pour styliser le contenu dans une vue de défilement et appliquer par exemple des paramètres flex pour
le contenu, vous devez utiliser le style de conteneur de contenu et c'est juste quelque chose
à 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
vous utilisez pour contrôler la disposition à l'intérieur de cette vue de défilement.
Maintenant, ici, sur ce style de conteneur de contenu, nous pouvons maintenant faire référence à la liste
des styles et, par conséquent, permettez-moi de renommer en fait ce style de liste actuel
que nous appliquons à cet habillage. est la liste elle-même.
Alternativement, vous auriez pu nommer ce contenu de liste bien sûr, mais je vais simplement le nommer liste
et renommer l'autre chose en conteneur de liste. Par conséquent, cela sera renommé en conteneur de liste
et maintenant nous pouvons ajouter une nouvelle propriété de liste ici à la feuille de style et qui
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à,
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
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
bien ce qui se passe ici.
Donc, avec cela, vous savez comment contrôler et disposer le contenu à l'intérieur d'une
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?
Disons que notre liste ici ne devrait pas commencer juste en dessous de cette case ici avec nos commandes, mais un peu
plus bas, elle devrait commencer au bas de l'écran, puis grimper en haut et ne
faire défiler que lorsqu'elle atteint le Haut.
Cela peut également être contrôlé avec notre style de liste qui est le style appliqué au style de conteneur de contenu, donc avec
ce style de conteneur de contenu, vous pouvez également contrôler cela en ajoutant justificationContenu parce que justifier le
contenu vous permet de positionner le contenu le long de l'axe principal de la boîte flexible et L'axe principal
de Flexbox est par défaut l'axe vertical car la direction par défaut est la colonne.
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
vers la fin de la liste.
Voyons donc si cela
fonctionne,
hein, ne semble pas fonctionner, non?
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
éléments sont ajoutés, nous voulons
maintenant que cette vue interne se développe automatiquement. Sur une vue normale, nous
y parviendrions en ajoutant flex one.
Essayons donc ceci ici sur cette liste de styles que nous ajoutons également à la vue de défilement.
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
que nous ne le résoudrons pas
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
nous le souhaitons, mais vous remarquerez que vous ne pouvez pas vraiment le faire défiler de telle
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
probablement pas ce que nous voulons, sur Android, cela ne fonctionne
pas non plus. Là, si
nous commençons maintenant à deviner, vous verrez le
même comportement, eh bien si j'y arriverais, là la seule différence est qu'il est cassé pour une
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
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
auquel vous l'ajoutez grandit et occupe autant d'espace que possible, tout comme Flex One, la
différence est que Flex Grow fonctionne un peu différemment en interne, il est plus
flexible que Flex. Flex dit simplement de
prendre tout l'espace disponible dans toutes les directions que vous pouvez obtenir, flex Grow indique essentiellement au
conteneur de pouvoir grandir, de pouvoir prendre autant d'espace que possible et il le fera, mais il conserve l'autre comportement
qu'il
a normalement, dans ce cas de la vue de défilement, où cela peut défiler et peut
également dépasser les limites de l'écran.
C'est donc un peu plus flexible et vous n'en avez probablement pas besoin si souvent sur une vue normale mais sur une
vue de défilement, c'est exactement ce dont
nous avons besoin et je le montre juste ici parce que c'est un cas spécial que vous n'avez qu'à savez ou
que vous pourriez trébucher
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
cours parce que c'est un scénario que vous pourriez rencontrer et donc, espérons-le, vous pouvez ensuite rappeler cette
conférence et voir comment résoudre cela.
J'ai donc ajouté flex Grow à cette propriété de liste et essayons maintenant. Ici, sur iOS, si nous commençons à deviner
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
à ce que l'élément le plus ancien soit visible, alors
maintenant cela montre le comportement que nous voulons, merci pour fléchir grandir.
Et sur Android, ce sera la même chose si nous commençons un jeu là-bas,
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.
Donc, cela fonctionne maintenant comme il le devrait ici sur Android et iOS et je montrais tout cela simplement pour que vous soyez
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
vous connaissiez certains des problèmes que vous pouvez rencontrer lorsque vous commencez à styliser lis
tsand lorsque vous souhaitez y ajouter votre propre mise en page, alors voici quelques astuces qui peuvent être
très utiles si vous rencontrez cette situation dans votre application.