ListHero (Exo)
ListHero (Exo)
Consigne
Éveil le héros qui sommeille en toi !
Ici, tu vas pratiquer avec une liste relativement simple. L’objectif est d’afficher une liste de héros. La première chose à faire est d’établir la structure qui modélisera les héros. Quelles sont les propriétés ? Analyse bien chaque cellule sur la maquette : chaque donnée qui change représente une propriété.
Une fois que la structure du modèle est prête, tu vas créer un tableau qui instancie chaque héros avec leurs données respectives pour chaque propriété attendue. Ensuite, utilise un ForEach pour parcourir ton tableau et afficher chaque héros comme sur la maquette.
En bonus, n’hésite pas à isoler la vue de la cellule dans une structure distincte pour améliorer la lisibilité et l’organisation de ton code.
Maquette
. Trucs et astuce
→ Pour décaler tes images, tu peux utiliser le modificateur .offset(), qui te permet d’ajuster leur position en jouant sur les axes des abscisses (horizontal) et des ordonnées (vertical).
→ Le modificateur .shadow() permet, comme son nom l’indique, d’ajouter une ombre en arrière-plan d’une vue. Il fonctionne sur la plupart des composants. Ici, il est appliqué au rectangle de la cellule, à l’image du héros, au nom du héros et au pouvoir du héros. (Un petit tour sur Google pour en savoir plus ! )
→ On l’a dit plus haut, à partir de ce cours, nous allons utiliser de nombreuses notions de base de Swift (arrays, structs, boucles for in). Ces notions doivent être acquises pour continuer sereinement la formation. Si tu n’es pas à l’aise, n’oublie pas que tu as les cours et des cas pratiques dans la formation Swift Starter Pack. Je t’ai mis les liens dans la section “Liens utiles” ci-dessous.
→ Tu peux télécharger les images du projet ici : Télécharger les images
Correction
Tips
Avec le ForEach, tu peux aussi bien retourner plusieurs vues selon une condition. L’outil fonctionne exactement comme une boucle for in. Donc, si tu veux, par exemple, répéter 10 fois un carré dans la vue, tu peux le faire ainsi :
La bonne syntaxe est ForEach(0..<10) { _ in Rectangle().frame(width: 50, height: 50) }. Ici, 0..<10 génère exactement 10 répétitions (de 0 à 9). Le _ in signifie que l’index de boucle n’est pas utilisé, ce qui est utile lorsque seule la répétition de la vue importe. Sans cadre (.frame(width: height:)), le Rectangle() ne serait pas visible.
Tips
Avec le ForEach, tu peux aussi bien retourner plusieurs vues selon une condition. L’outil fonctionne exactement comme une boucle for in. Donc, si tu veux, par exemple, répéter 10 fois un carré dans la vue, tu peux le faire ainsi :
La bonne syntaxe est ForEach(0..<10) { _ in Rectangle().frame(width: 50, height: 50) }. Ici, 0..<10 génère exactement 10 répétitions (de 0 à 9). Le _ in signifie que l’index de boucle n’est pas utilisé, ce qui est utile lorsque seule la répétition de la vue importe. Sans cadre (.frame(width: height:)), le Rectangle() ne serait pas visible.