#Remplir la vue de détail du Loot

Nous allons créer une vue pour afficher les informations d’un objet. Cette vue doit être appelée lors du clique sur un objet de la liste.

  • Créez un nouveau fichier LootDetailView.swift de type SwiftUI View

Maintenant, au lieu d’utiliser une sheet pour afficher la vue, nous allons utiliser une NavigationLink pour naviguer vers la vue de détail :

// ContentView
ForEach(inventory.items) { item in
    NavigationLink {
        LootDetailView(item: item) // On passe directement l'item à la vue
    } label: {
        // Votre vue d'une ligne d'item
    }
}

#🔧 Exercice 1

  • Faites en sorte que ce code fonctionne, la vue détail doit s’ouvrir lors du clique sur un élément de la liste
  • Votre vue détail doit conserver la barre de navigation, et un bouton de retour doit être présent pour revenir à la liste

#🔧 Exercice 2

Intégrer l’interface suivante dans votre vue détail :

Item “normal”Item “unique”

On doit voir apparaitre les informations suivantes :

  • Si l’objet est unique alors ajouter un texte “Objet Unique 🏆” qui se démarque du reste
  • Afficher le nom de l’objet
  • Afficher le type de l’objet
  • Afficher le jeu d’origine de l’objet avec son image de couverture si disponible.
  • Afficher la rareté
  • Afficher sa puissance d’attaque si disponible
  • Afficher la quantité que vous possédez

#Image du jeu

  • Si l’image du jeu existe :

    • Hauteur : 58
    • Border radius : 4
    • Conserver le ratio d’origine
  • Si l’image du jeu n’existe pas voici la vue à afficher :

    • Hauteur : 58
    • Border radius : 4
    • Le fond est .gray avec un .gradient et une opacité de 0.4.
    • L’icone est un Image(systemName: "rectangle.slash") en .black avec une opacité de 0.4.
    • Trouver une solution pour le padding de l’icone, pour que cela ressemble à l’image ci-dessus.

La couleur de fond de la vue doit être la couleur de la rareté de l’objet, idem pour l’ombre de l’image de l’objet, dans l’exemple : “Légendaire” est de couleur orange, donc la couleur de fond de la vue est orange, et l’ombre de l’image est jaune.

🔥 Si vous avez ajouter des propriétés à votre modèle, pensez à les afficher également