AirPod Card (Exo)
AirPod Card (Exo)
Consigne
Comme dans l’exercice précédent, Swift Language, l’objectif ici est de manipuler la mise en forme d’une vue. Bien que la structure soit similaire, avec l’utilisation de VStack, HStack, Spacer, des icônes SF Symbol et du texte, cet exercice introduit quelques nouveautés. Cette fois, tu travailleras avec un ZStack pour superposer des éléments, notamment sur le rectangle en bas de la carte. De plus, tu devras combiner plusieurs Stack, en travaillant à la fois sur des alignements horizontaux et verticaux. Si l’on observe bien la composition du rectangle, on remarque que les éléments sont d’abord alignés horizontalement, puis organisés verticalement à l’intérieur de la pile horizontale.
Maquette
Trucs et astuce
→ Le nom des SF-Symbol ( “airpods.pro”, « cart.fill”) → Lorsque tu commences à créer une vue à partir d’une maquette, pense à déconstruire mentalement sa structure avant de coder. Analyse d’abord comment la vue est organisée. Ici, les éléments sont disposés de haut en bas, donc on peut utiliser un VStack comme conteneur principal. Ensuite, on remarque deux grands espaces, ce qui suggère l’utilisation de Spacer() pour espacer les éléments. En bas, il y a un rectangle avec des composants superposés, donc un ZStack est approprié pour gérer cette superposition. À l’intérieur du ZStack, les éléments sont alignés horizontalement (avec le caddie à gauche et les informations produit à droite). Ces informations, quant à elles, sont disposées verticalement (le nom du produit au-dessus du prix), ce qui nécessite un VStack. En déconstruisant ainsi la vue, tu simplifies la phase de développement, car tu as déjà un plan d’action clair pour organiser et coder chaque section efficacement.Correction
Tips
Lorsque tu ne maîtrises pas une notion, ton premier réflexe doit être de faire une recherche sur Google, et de préférence en anglais pour obtenir de meilleurs résultats. Par exemple, si tu n’as jamais vu comment créer un rectangle avec des bords arrondis, tu peux formuler ta recherche ainsi : “Corner radius rectangle SwiftUI”. Il est essentiel de toujours préciser la technologie sur laquelle tu travailles dans ta recherche (ici, SwiftUI), afin d’obtenir des réponses pertinentes et spécifiques à ton besoin.
Tips
Lorsque tu ne maîtrises pas une notion, ton premier réflexe doit être de faire une recherche sur Google, et de préférence en anglais pour obtenir de meilleurs résultats. Par exemple, si tu n’as jamais vu comment créer un rectangle avec des bords arrondis, tu peux formuler ta recherche ainsi : “Corner radius rectangle SwiftUI”. Il est essentiel de toujours préciser la technologie sur laquelle tu travailles dans ta recherche (ici, SwiftUI), afin d’obtenir des réponses pertinentes et spécifiques à ton besoin.