Évidemment, cet écran en ce moment n'est pas très utile et
donc je vais maintenant passer au texte que j'ai utilisé comme mannequin et le remplacer par disons commencer un nouveau jeu, quelque
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
connaissez peut-être dans certaines applications et sites Web où vous avez une boîte avec une légère ombre portée
derrière, peut-être des coins arrondis.
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
peut y appliquer beaucoup de styles, on peut y ajouter notre ombre et nos coins arrondis puis tenir
notre contenu dans
cette vue, donc c'est génial pour avoir un style général du conteneur et maintenant à l'intérieur de cette
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
utilisateurs peut entrer quelque chose.
Alors là,
je vais ajouter un composant de saisie de texte qui est ce composant intégré où les utilisateurs peuvent utiliser le clavier pour entrer
une valeur et ici, ils doivent entrer un nombre. Nous allons configurer cela et le styliser dans
une seconde, pour l'instant je vais le déposer comme ça et en dessous, je veux avoir deux boutons
assis côte
à côte et c'est important, côte à côte, pas en dessous de chaque d'autres qui nous permettent de réinitialiser
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
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
ici, alors je devrais changer la direction de flexion de ces vues pour les avoir à côté les uns aux autres, mais le texte
et la saisie de texte seraient également assis côte à côte.
Alors maintenant, je vais ajouter une vue ici afin que dans cette vue, la vue environnante, ceci, ceci et cette vue soient
assis les uns au-dessus des
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
assis côte à côte, donc dans l'axe horizontal et c'est ce que je veux ici.
Je vais donc importer le bouton intégré qui est l'un des composants de la vue qui s'ajuste automatiquement
à la plate-forme sous-jacente, plus tard dans un module séparé, vous apprendrez comment vous pouvez trouver manuellement sur
quelle plate-forme vous exécutez pour ajuster l'apparence de votre application à cela.
Ici, nous irons avec le bouton intégré et donnerons au premier un titre de réinitialisation et le second, le deuxième
bouton ici un titre de confirmation, puis ici, onPress
ne fera rien pour le moment, donc c'est juste un fonction vide, il suffit de l'ajouter pour que nous ayons déjà
l'accessoire, nous ajouterons la logique plus
tard et pour l'instant,
nous aurons juste les boutons ici.
Maintenant, le style manquera, comme je l'ai dit, le bouton devrait être assis côte à côte.
Par conséquent, je vais donner à cette vue ici qui contient les boutons un style
pointant sur l'objet styles
et là, disons un conteneur de boutons, ce nom,
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
à l'objet styles et j'utiliserai le conteneur d'entrée disons, ce
nom dépend aussi de vous et ici, je veux le styler comme un titre spécial, peut-être
avec une taille de police plus grande, donc ici, je vais assigner un style de titre disons.
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
nous pouvons commencer à ajouter des styles là-bas. Maintenant, pour le titre, encore une fois, je
veux définir la taille de la police, je vais donc définir
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
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
conteneur d'entrée dans une seconde, le conteneur de boutons obtiendra une direction flexible de la ligne, la valeur par
défaut est colonne, mais maintenant je veux
que les éléments soient assis côte à côte, nous devons donc
utiliser la ligne ici.
Je veux définir une largeur ici parce que si nous ne définissons pas de largeur sur le conteneur de boutons,
ce serait juste aussi large que les deux boutons sont ensemble, au lieu
de cela, je veux utiliser la largeur du parent, donc de cette vue ici puis positionnez les boutons à l'intérieur de cette vue,
donc je veux
faire le contraire, non pas styliser la vue en fonction des boutons mais positionner les boutons en fonction de
la vue.
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
utiliser
justificationContenu pour les positionner le long de l'axe principal qui pour la ligne de direction flexible est de gauche à
droite et là je vais choisir l'espace entre de sorte que les boutons se trouvent sur les bords gauche et droit
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
un certain espacement à gauche et à droite à l'intérieur de notre vue, peut-être 15 afin que les boutons ne se trouvent pas directement
sur les bords à gauche et à droite, mais il y en
a espacement à gauche et à droite. D'accord, donc avec cela,
si nous sauvegardons cela, nous voyons ce que je ne sais pas pour
vous mais qui n'a pas l'air si bien, n'est-ce pas?
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
les styles y semblent un peu décalés.
Nous devons donc donner au conteneur d'entrée un certain style et là, je veux ajouter une largeur et vous pouvez
maintenant utiliser une largeur codée en dur de disons 300 pixels ou utiliser une largeur et un pourcentage.
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
trop petit, c'est donc un peu de réactivité que j'ajoute déjà ici, si le l'appareil serait trop petit,
nous nous assurons que notre largeur ne dépasse pas 80%. Et puis je veux aligner les éléments au centre,
gardez à l'esprit que le conteneur
d'entrée est une vue, donc il utilise flexbox, il utilise la
colonne par défaut de direction flex et donc avec aligner le centre de l'élément, nous positionnons les
éléments au centre sur le axe transversal qui est de gauche
à droite, donc nous centrons les éléments horizontalement. Maintenant avec ça, maintenant ça a l'air beaucoup mieux,
nous ne pouvons pas vraiment
voir l'entrée mais c'est la vieille chose, non?
Nous devrons le styliser pour que nous puissions vraiment le voir. Nous voyons les boutons cependant et nous
pouvons voir que notre disposition générale et notre style prennent une certaine forme.
Pourtant, je ne suis pas encore 100% satisfait de l'aspect de cela.