1 00:00:02,560 --> 00:00:08,680 Pour centrer le contenu au milieu, nous pouvons utiliser une technique que j'ai déjà abordée plus tôt, le 2 00:00:08,710 --> 00:00:11,500 style et là en particulier, la flexbox. 3 00:00:11,500 --> 00:00:17,470 Donc, sur notre modal, nous avons cette vue ou dans notre modal, nous avons cette vue, c'est notre vue racine, 4 00:00:17,500 --> 00:00:19,400 c'est le seul élément dans le 5 00:00:19,420 --> 00:00:25,090 modal, puis cette vue a bien sûr d'autres éléments enfants, mais c'est le seul enfant direct de notre modal. 6 00:00:25,180 --> 00:00:29,310 Là, nous avons le style de conteneur d'entrée que nous appliquons et là, nous définissons actuellement une 7 00:00:29,350 --> 00:00:30,490 direction flexible de ligne. 8 00:00:30,490 --> 00:00:35,170 Maintenant, bien sûr, nous pourrions laisser cela mais je dirais que dans le modal si nous le présentons en 9 00:00:35,620 --> 00:00:41,230 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. 10 00:00:41,610 --> 00:00:48,250 Je vais donc changer cela en colonne ou puisque c'est la valeur par défaut, supprimez simplement cette direction 11 00:00:48,250 --> 00:00:52,580 flexible et maintenant je veux le centrer horizontalement et verticalement et pour 12 00:00:52,810 --> 00:00:59,480 cela, nous pouvons définir justifier le contenu au centre ici et aligner les éléments au centre mais cela ne 13 00:00:59,680 --> 00:01:01,690 suffira pas à lui seul. 14 00:01:01,780 --> 00:01:05,710 Vous pouvez voir si vous ouvrez le modal, c'est toujours tout en 15 00:01:05,800 --> 00:01:07,920 haut et la raison en est 16 00:01:07,930 --> 00:01:14,080 que notre conteneur d'entrée, de sorte que la vue à laquelle nous attribuons ce style, par défaut, ne prend 17 00:01:14,080 --> 00:01:16,720 pas tout l'espace disponible peut entrer dans la 18 00:01:16,720 --> 00:01:22,450 vue environnante, donc dans ce cas dans le modal. Le modal prend théoriquement toute la hauteur et la largeur de 19 00:01:22,480 --> 00:01:25,480 l'écran, mais la vue ne prend tout simplement pas cet espace disponible 20 00:01:25,480 --> 00:01:26,560 par défaut, c'est juste 21 00:01:26,560 --> 00:01:28,630 comment cela fonctionne, c'est le paramètre par défaut. 22 00:01:28,630 --> 00:01:31,900 Il ne prend que l'espace dont ses enfants ont besoin, donc la 23 00:01:31,900 --> 00:01:33,590 saisie de texte et le bouton. 24 00:01:33,730 --> 00:01:38,830 Donc, la vue a essentiellement la hauteur de la saisie de texte et du 25 00:01:38,980 --> 00:01:47,420 bouton combinés, puis également la largeur de l'enfant le plus large dans ce cas, donc pour la saisie de texte ici et 26 00:01:47,420 --> 00:01:51,940 d'ailleurs, Android n'a tout simplement pas mis à jour correctement, c'est 27 00:01:51,940 --> 00:02:02,010 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 28 00:02:02,010 --> 00:02:04,320 vous appliquez à la vue, dans ce 29 00:02:04,320 --> 00:02:11,670 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 30 00:02:12,120 --> 00:02:18,270 flexbox et comme vous l'avez appris plus tôt dans ce module, dans cette conférence flexbox supplémentaire, flex 31 00:02:18,480 --> 00:02:25,140 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 32 00:02:25,140 --> 00:02:26,430 seul élément, ce 33 00:02:26,430 --> 00:02:29,970 s'assure simplement que ce conteneur prendra tout l'espace disponible. 34 00:02:29,970 --> 00:02:34,980 Vous pouvez également définir ceci sur flex deux, la valeur exacte n'a pas d'importance ici s'il s'agit du 35 00:02:34,980 --> 00:02:39,570 seul enfant, mais vous devez définir flex pour vous assurer que cela prend tout l'espace disponible. 36 00:02:39,600 --> 00:02:44,160 Si vous ne le faites pas, il prendra juste autant d'espace que ses éléments enfants, si 37 00:02:44,280 --> 00:02:48,850 vous définissez flex, il prendra autant d'espace que son élément parent lui donne, de sorte que 38 00:02:48,900 --> 00:02:50,720 l'élément parent de cette vue, 39 00:02:50,730 --> 00:02:52,990 le modal dans ce cas donne la vue. 40 00:02:53,340 --> 00:03:00,650 Donc, avec flex one ajouté ici, si vous enregistrez maintenant cela, sur iOS, vous voyez maintenant que c'est bien centré et pour voir 41 00:03:00,670 --> 00:03:05,860 aussi cela sur Android, ce que vous pouvez faire, c'est que vous pouvez ouvrir le sélecteur de 42 00:03:06,070 --> 00:03:08,210 tâches, fermer cette application ici et 43 00:03:08,320 --> 00:03:11,890 appuyer sur un ici pour redémarrer cette application sur Android, n'aime 44 00:03:11,890 --> 00:03:19,970 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 45 00:03:20,000 --> 00:03:22,140 l'entrée que je veux avoir et 46 00:03:22,250 --> 00:03:30,530 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 47 00:03:30,530 --> 00:03:35,380 une fois, malheureusement, Android a vraiment des problèmes avec mon modal, alors fermons-le et 48 00:03:39,120 --> 00:03:40,430 voyons si cela 49 00:03:40,440 --> 00:03:42,000 semble bon, oui c'est bon. 50 00:03:42,000 --> 00:03:47,430 Maintenant, je veux m'assurer que lorsque nous cliquons sur Ajouter ici, nous fermons maintenant le modal.