1 00:00:02,460 --> 00:00:06,390 Évidemment, cet écran en ce moment n'est pas très utile et 2 00:00:06,390 --> 00:00:13,500 donc je vais maintenant passer au texte que j'ai utilisé comme mannequin et le remplacer par disons commencer un nouveau jeu, quelque 3 00:00:13,500 --> 00:00:21,480 chose comme ça et en dessous, je veux avoir un zone d'entrée avec une légère ombre portée, donc ce look de carte typique que vous 4 00:00:21,540 --> 00:00:27,420 connaissez peut-être dans certaines applications et sites Web où vous avez une boîte avec une légère ombre portée 5 00:00:27,420 --> 00:00:29,220 derrière, peut-être des coins arrondis. 6 00:00:29,400 --> 00:00:36,570 Je veux recréer ça ici, donc je vais ajouter une vue ici, une vue parce que là encore c'est un élément très flexible, on 7 00:00:36,600 --> 00:00:42,120 peut y appliquer beaucoup de styles, on peut y ajouter notre ombre et nos coins arrondis puis tenir 8 00:00:42,150 --> 00:00:43,460 notre contenu dans 9 00:00:43,470 --> 00:00:49,080 cette vue, donc c'est génial pour avoir un style général du conteneur et maintenant à l'intérieur de cette 10 00:00:49,080 --> 00:00:56,910 vue, je veux avoir un texte où nous disons sélectionner un nombre par exemple et où nous voulons également avoir un champ de texte où les 11 00:00:57,150 --> 00:00:58,580 utilisateurs peut entrer quelque chose. 12 00:00:58,590 --> 00:00:59,310 Alors là, 13 00:00:59,430 --> 00:01:06,300 je vais ajouter un composant de saisie de texte qui est ce composant intégré où les utilisateurs peuvent utiliser le clavier pour entrer 14 00:01:06,300 --> 00:01:11,970 une valeur et ici, ils doivent entrer un nombre. Nous allons configurer cela et le styliser dans 15 00:01:11,970 --> 00:01:17,820 une seconde, pour l'instant je vais le déposer comme ça et en dessous, je veux avoir deux boutons 16 00:01:17,850 --> 00:01:18,810 assis côte 17 00:01:18,810 --> 00:01:25,190 à côte et c'est important, côte à côte, pas en dessous de chaque d'autres qui nous permettent de réinitialiser 18 00:01:25,190 --> 00:01:32,510 l'entrée et d'en choisir une nouvelle ou de confirmer celle choisie. Nous avons donc besoin d'une vue ici parce que cela nous permet de positionner les éléments les 19 00:01:32,660 --> 00:01:37,520 uns à côté des autres alors que ces éléments sont positionnés les uns au-dessus des autres, car si j'ajoutais simplement deux boutons 20 00:01:37,560 --> 00:01:42,650 ici, alors je devrais changer la direction de flexion de ces vues pour les avoir à côté les uns aux autres, mais le texte 21 00:01:42,680 --> 00:01:45,420 et la saisie de texte seraient également assis côte à côte. 22 00:01:45,500 --> 00:01:51,950 Alors maintenant, je vais ajouter une vue ici afin que dans cette vue, la vue environnante, ceci, ceci et cette vue soient 23 00:01:52,250 --> 00:01:54,010 assis les uns au-dessus des 24 00:01:54,020 --> 00:02:00,590 autres, donc sur l'axe vertical mais à l'intérieur de cette vue, je peux maintenant aussi m'assurer que les éléments là-bas sont alors 25 00:02:00,590 --> 00:02:05,270 assis côte à côte, donc dans l'axe horizontal et c'est ce que je veux ici. 26 00:02:05,450 --> 00:02:11,480 Je vais donc importer le bouton intégré qui est l'un des composants de la vue qui s'ajuste automatiquement 27 00:02:11,510 --> 00:02:17,540 à la plate-forme sous-jacente, plus tard dans un module séparé, vous apprendrez comment vous pouvez trouver manuellement sur 28 00:02:17,630 --> 00:02:21,990 quelle plate-forme vous exécutez pour ajuster l'apparence de votre application à cela. 29 00:02:22,220 --> 00:02:29,450 Ici, nous irons avec le bouton intégré et donnerons au premier un titre de réinitialisation et le second, le deuxième 30 00:02:29,510 --> 00:02:32,450 bouton ici un titre de confirmation, puis ici, onPress 31 00:02:32,450 --> 00:02:39,740 ne fera rien pour le moment, donc c'est juste un fonction vide, il suffit de l'ajouter pour que nous ayons déjà 32 00:02:39,740 --> 00:02:42,000 l'accessoire, nous ajouterons la logique plus 33 00:02:42,050 --> 00:02:43,710 tard et pour l'instant, 34 00:02:43,850 --> 00:02:46,140 nous aurons juste les boutons ici. 35 00:02:46,250 --> 00:02:51,330 Maintenant, le style manquera, comme je l'ai dit, le bouton devrait être assis côte à côte. 36 00:02:51,410 --> 00:02:57,170 Par conséquent, je vais donner à cette vue ici qui contient les boutons un style 37 00:02:57,170 --> 00:02:59,060 pointant sur l'objet styles 38 00:02:59,060 --> 00:03:02,370 et là, disons un conteneur de boutons, ce nom, 39 00:03:02,520 --> 00:03:10,930 comme toujours, dépend entièrement de vous et je veux également donner à cette vue qui contient mes entrées un style ici, en référence 40 00:03:10,960 --> 00:03:14,930 à l'objet styles et j'utiliserai le conteneur d'entrée disons, ce 41 00:03:15,040 --> 00:03:20,850 nom dépend aussi de vous et ici, je veux le styler comme un titre spécial, peut-être 42 00:03:20,950 --> 00:03:27,090 avec une taille de police plus grande, donc ici, je vais assigner un style de titre disons. 43 00:03:27,300 --> 00:03:36,900 Maintenant, nous pouvons descendre dans notre feuille de style et ajouter le titre, ajouter le conteneur d'entrée et également ajouter le conteneur de boutons et maintenant 44 00:03:37,080 --> 00:03:43,330 nous pouvons commencer à ajouter des styles là-bas. Maintenant, pour le titre, encore une fois, je 45 00:03:43,330 --> 00:03:47,330 veux définir la taille de la police, je vais donc définir 46 00:03:47,410 --> 00:03:58,750 la taille de la police comme ceci, définissez-la sur disons 20 et peut-être aussi ajouter un espacement sur l'axe vertical avec une marge verticale de disons 10, 10 comme ceci 47 00:03:58,750 --> 00:04:09,750 et gardez toujours à l'esprit, la marge verticale remplace essentiellement la marge inférieure et la marge supérieure et maintenant sur le conteneur de boutons et je reviendrai dans le 48 00:04:09,990 --> 00:04:17,050 conteneur d'entrée dans une seconde, le conteneur de boutons obtiendra une direction flexible de la ligne, la valeur par 49 00:04:17,060 --> 00:04:19,780 défaut est colonne, mais maintenant je veux 50 00:04:19,790 --> 00:04:23,790 que les éléments soient assis côte à côte, nous devons donc 51 00:04:23,790 --> 00:04:25,870 utiliser la ligne ici. 52 00:04:25,870 --> 00:04:31,420 Je veux définir une largeur ici parce que si nous ne définissons pas de largeur sur le conteneur de boutons, 53 00:04:31,450 --> 00:04:34,960 ce serait juste aussi large que les deux boutons sont ensemble, au lieu 54 00:04:34,960 --> 00:04:41,050 de cela, je veux utiliser la largeur du parent, donc de cette vue ici puis positionnez les boutons à l'intérieur de cette vue, 55 00:04:41,050 --> 00:04:41,880 donc je veux 56 00:04:41,890 --> 00:04:47,140 faire le contraire, non pas styliser la vue en fonction des boutons mais positionner les boutons en fonction de 57 00:04:47,140 --> 00:04:47,970 la vue. 58 00:04:48,160 --> 00:04:55,150 Je vais donc donner au conteneur de boutons cette vue et cette largeur explicite ici et maintenant pour positionner les boutons là-dedans, nous pouvons 59 00:04:55,150 --> 00:04:55,590 utiliser 60 00:04:55,690 --> 00:05:01,630 justificationContenu pour les positionner le long de l'axe principal qui pour la ligne de direction flexible est de gauche à 61 00:05:01,630 --> 00:05:07,930 droite et là je vais choisir l'espace entre de sorte que les boutons se trouvent sur les bords gauche et droit 62 00:05:07,930 --> 00:05:15,000 de cette ligne et répartissent tout l'espace libre disponible entre eux. Ajoutez également un peu de rembourrage horizontal ici, de sorte que nous ayons 63 00:05:15,000 --> 00:05:21,660 un certain espacement à gauche et à droite à l'intérieur de notre vue, peut-être 15 afin que les boutons ne se trouvent pas directement 64 00:05:21,660 --> 00:05:24,920 sur les bords à gauche et à droite, mais il y en 65 00:05:25,020 --> 00:05:29,420 a espacement à gauche et à droite. D'accord, donc avec cela, 66 00:05:29,560 --> 00:05:35,240 si nous sauvegardons cela, nous voyons ce que je ne sais pas pour 67 00:05:35,660 --> 00:05:39,860 vous mais qui n'a pas l'air si bien, n'est-ce pas? 68 00:05:39,860 --> 00:05:45,650 Maintenant, le problème est que le conteneur d'entrée n'a pas encore de styles. Le conteneur d'entrée contient toutes les entrées, c'est pourquoi 69 00:05:45,650 --> 00:05:48,340 les styles y semblent un peu décalés. 70 00:05:49,040 --> 00:05:56,000 Nous devons donc donner au conteneur d'entrée un certain style et là, je veux ajouter une largeur et vous pouvez 71 00:05:56,090 --> 00:06:02,690 maintenant utiliser une largeur codée en dur de disons 300 pixels ou utiliser une largeur et un pourcentage. 72 00:06:02,990 --> 00:06:11,570 Maintenant, j'ajouterai ici une largeur de 300, mais j'ajouterai également une largeur maximale de 80% pour que nous ayons une largeur de 300 pixels, mais si l'appareil est 73 00:06:11,570 --> 00:06:17,120 trop petit, c'est donc un peu de réactivité que j'ajoute déjà ici, si le l'appareil serait trop petit, 74 00:06:17,120 --> 00:06:23,300 nous nous assurons que notre largeur ne dépasse pas 80%. Et puis je veux aligner les éléments au centre, 75 00:06:23,300 --> 00:06:25,840 gardez à l'esprit que le conteneur 76 00:06:25,850 --> 00:06:29,600 d'entrée est une vue, donc il utilise flexbox, il utilise la 77 00:06:29,600 --> 00:06:35,420 colonne par défaut de direction flex et donc avec aligner le centre de l'élément, nous positionnons les 78 00:06:35,630 --> 00:06:39,240 éléments au centre sur le axe transversal qui est de gauche 79 00:06:39,260 --> 00:06:44,500 à droite, donc nous centrons les éléments horizontalement. Maintenant avec ça, maintenant ça a l'air beaucoup mieux, 80 00:06:44,500 --> 00:06:46,140 nous ne pouvons pas vraiment 81 00:06:46,180 --> 00:06:48,780 voir l'entrée mais c'est la vieille chose, non? 82 00:06:48,970 --> 00:06:53,710 Nous devrons le styliser pour que nous puissions vraiment le voir. Nous voyons les boutons cependant et nous 83 00:06:53,710 --> 00:06:57,710 pouvons voir que notre disposition générale et notre style prennent une certaine forme. 84 00:06:58,090 --> 00:07:01,440 Pourtant, je ne suis pas encore 100% satisfait de l'aspect de cela.