Fruit Paradise (Exo)

Fruit Paradise (Exo)

Consigne

Sur cet exercice, on va simplement reprendre toutes les notions des cours précédents, à savoir les listes, les ScrollView et les conteneurs lazy comme LazyVStack et LazyHGrid.

L’idée est d’afficher une collection de fruits en format grille, comme indiqué sur la maquette, avec trois colonnes, et une liste qui doit être scrollable verticalement. Tu devras impérativement utiliser un ForEach et non une List, car, pour rappel, la List ne fonctionne pas dans un format en grille.

Pour cet exercice, j’ai volontairement ajouté beaucoup de données. Mais, pour une fois, je vais être sympa, je te fournis le modèle de données ainsi que le tableau déjà rempli.

Tu devras donc créer un fichier Swift nommé Fruit, et y coller le code suivant.

struct Fruit: Identifiable {
    let id = UUID()
    let imageName: String
    let name: String
    let origin: String
    let pricePerKg: Double
}

let fruits = [
    Fruit(imageName: "apple", name: "Apple", origin: "France", pricePerKg: 3.99),
    Fruit(imageName: "apricot", name: "Apricot", origin: "Spain", pricePerKg: 4.50),
    Fruit(imageName: "avocado", name: "Avocado", origin: "Mexico", pricePerKg: 6.99),
    Fruit(imageName: "banana", name: "Banana", origin: "Ecuador", pricePerKg: 2.30),
    Fruit(imageName: "blackberry", name: "Blackberry", origin: "USA", pricePerKg: 5.20),
    Fruit(imageName: "blueberry", name: "Blueberry", origin: "Canada", pricePerKg: 5.50),
    Fruit(imageName: "cherries", name: "Cherries", origin: "Italy", pricePerKg: 7.80),
    Fruit(imageName: "coconut", name: "Coconut", origin: "India", pricePerKg: 3.00),
    Fruit(imageName: "currant", name: "Currant", origin: "Germany", pricePerKg: 4.70),
    Fruit(imageName: "custard-apple", name: "Custard Apple", origin: "Brazil", pricePerKg: 8.90),
    Fruit(imageName: "dragonfruit", name: "Dragonfruit", origin: "Vietnam", pricePerKg: 9.50),
    Fruit(imageName: "fig", name: "Fig", origin: "Turkey", pricePerKg: 6.00),
    Fruit(imageName: "grapefruit", name: "Grapefruit", origin: "South Africa", pricePerKg: 4.10),
    Fruit(imageName: "grapes", name: "Grapes", origin: "Italy", pricePerKg: 3.90),
    Fruit(imageName: "khaki", name: "Khaki", origin: "Japan", pricePerKg: 5.70),
    Fruit(imageName: "kiwi", name: "Kiwi", origin: "New Zealand", pricePerKg: 6.30),
    Fruit(imageName: "lemon", name: "Lemon", origin: "Argentina", pricePerKg: 2.50),
    Fruit(imageName: "lime", name: "Lime", origin: "Mexico", pricePerKg: 2.80),
    Fruit(imageName: "lychee", name: "Lychee", origin: "China", pricePerKg: 7.00),
    Fruit(imageName: "mango", name: "Mango", origin: "India", pricePerKg: 5.20),
    Fruit(imageName: "medlar", name: "Medlar", origin: "Morocco", pricePerKg: 4.90),
    Fruit(imageName: "melon", name: "Melon", origin: "France", pricePerKg: 3.60),
    Fruit(imageName: "olives", name: "Olives", origin: "Greece", pricePerKg: 6.50),
    Fruit(imageName: "orange", name: "Orange", origin: "Spain", pricePerKg: 2.70),
    Fruit(imageName: "papaya", name: "Papaya", origin: "Brazil", pricePerKg: 6.80),
    Fruit(imageName: "passion-fruit", name: "Passion Fruit", origin: "Colombia", pricePerKg: 8.50),
    Fruit(imageName: "peach", name: "Peach", origin: "Italy", pricePerKg: 4.20),
    Fruit(imageName: "pear", name: "Pear", origin: "Netherlands", pricePerKg: 3.80),
    Fruit(imageName: "pineapple", name: "Pineapple", origin: "Costa Rica", pricePerKg: 5.00),
    Fruit(imageName: "plum", name: "Plum", origin: "USA", pricePerKg: 4.30),
    Fruit(imageName: "pomegranate", name: "Pomegranate", origin: "India", pricePerKg: 7.50),
    Fruit(imageName: "raspberry", name: "Raspberry", origin: "Scotland", pricePerKg: 8.00),
    Fruit(imageName: "star-apple", name: "Star Apple", origin: "Philippines", pricePerKg: 9.00),
    Fruit(imageName: "strawberry", name: "Strawberry", origin: "France", pricePerKg: 5.70),
    Fruit(imageName: "tangerine", name: "Tangerine", origin: "China", pricePerKg: 3.40),
    Fruit(imageName: "watermelon", name: "Watermelon", origin: "Turkey", pricePerKg: 1.90)
]

Maquette

. Trucs et astuce

→ L’IA est un formidable outil pour gagner du temps. Ici, pour créer le tableau de données, j’ai demandé à ChatGPT de me générer le tableau que je t’ai fourni à partir du modèle que je lui avais transmis. Je pense avoir gagné une heure de travail grâce à ça. Cette fois, je te le fournis directement, mais prends l’habitude d’utiliser des outils qui te feront gagner en productivité.

→ Pour tronquer un texte quand tu manques de place en SwiftUI, voici un petit tips : utilise une condition pour vérifier si le nombre de caractères dépasse la limite que tu souhaites (.count). Ensuite, tu peux utiliser la méthode prefix() pour garder uniquement les caractères souhaités et remplacer les derniers par un symbole (en général des points de suspension …).

→ Tu peux télécharger les images du projet ici :  Télécharger les images

Lien utile

→ Les listes

→ ScrollView

→ Lazy

→ LazyGrid

 Correction

→ Correction