Pour centrer le contenu au milieu, nous pouvons utiliser une technique que j'ai déjà abordée plus tôt, le
style et là en particulier, la flexbox.
Donc, sur notre modal, nous avons cette vue ou dans notre modal, nous avons cette vue, c'est notre vue racine,
c'est le seul élément dans le
modal, puis cette vue a bien sûr d'autres éléments enfants, mais c'est le seul enfant direct de notre modal.
Là, nous avons le style de conteneur d'entrée que nous appliquons et là, nous définissons actuellement une
direction flexible de ligne.
Maintenant, bien sûr, nous pourrions laisser cela mais je dirais que dans le modal si nous le présentons en
plein écran comme celui-ci, je suis en fait très bien avec une orientation verticale pour que nous ayons l'entrée et en dessous, le bouton.
Je vais donc changer cela en colonne ou puisque c'est la valeur par défaut, supprimez simplement cette direction
flexible et maintenant je veux le centrer horizontalement et verticalement et pour
cela, nous pouvons définir justifier le contenu au centre ici et aligner les éléments au centre mais cela ne
suffira pas à lui seul.
Vous pouvez voir si vous ouvrez le modal, c'est toujours tout en
haut et la raison en est
que notre conteneur d'entrée, de sorte que la vue à laquelle nous attribuons ce style, par défaut, ne prend
pas tout l'espace disponible peut entrer dans la
vue environnante, donc dans ce cas dans le modal. Le modal prend théoriquement toute la hauteur et la largeur de
l'écran, mais la vue ne prend tout simplement pas cet espace disponible
par défaut, c'est juste
comment cela fonctionne, c'est le paramètre par défaut.
Il ne prend que l'espace dont ses enfants ont besoin, donc la
saisie de texte et le bouton.
Donc, la vue a essentiellement la hauteur de la saisie de texte et du
bouton combinés, puis également la largeur de l'enfant le plus large dans ce cas, donc pour la saisie de texte ici et
d'ailleurs, Android n'a tout simplement pas mis à jour correctement, c'est
pourquoi vous voyez cela sortie étrange ici, vous pouvez ignorer cela pour l'instant. Donc, pour que la vue occupe tout l'espace disponible ici, vous pouvez simplement accéder au style que
vous appliquez à la vue, dans ce
cas, notre style de conteneur d'entrée ici et définir flex sur un ici. Flex est une propriété qui est utilisée en conjonction avec
flexbox et comme vous l'avez appris plus tôt dans ce module, dans cette conférence flexbox supplémentaire, flex
vous permet de contrôler l'espace que vos différents éléments à l'intérieur d'une flexbox prennent et s'il s'agit du
seul élément, ce
s'assure simplement que ce conteneur prendra tout l'espace disponible.
Vous pouvez également définir ceci sur flex deux, la valeur exacte n'a pas d'importance ici s'il s'agit du
seul enfant, mais vous devez définir flex pour vous assurer que cela prend tout l'espace disponible.
Si vous ne le faites pas, il prendra juste autant d'espace que ses éléments enfants, si
vous définissez flex, il prendra autant d'espace que son élément parent lui donne, de sorte que
l'élément parent de cette vue,
le modal dans ce cas donne la vue.
Donc, avec flex one ajouté ici, si vous enregistrez maintenant cela, sur iOS, vous voyez maintenant que c'est bien centré et pour voir
aussi cela sur Android, ce que vous pouvez faire, c'est que vous pouvez ouvrir le sélecteur de
tâches, fermer cette application ici et
appuyer sur un ici pour redémarrer cette application sur Android, n'aime
pas le modal comme il semble et maintenant ici, vous le voyez aussi. Maintenant, un ajustement minuscule est un peu d'espacement entre le bouton et
l'entrée que je veux avoir et
pour cela, je vais aller à l'entrée et ajouter une marge inférieure de 10 ici, mais avec cela, je suis très content de cela encore
une fois, malheureusement, Android a vraiment des problèmes avec mon modal, alors fermons-le et
voyons si cela
semble bon, oui c'est bon.
Maintenant, je veux m'assurer que lorsque nous cliquons sur Ajouter ici, nous fermons maintenant le modal.