#Une page pour nos nouveaux items

Nous allons maintenant créer une page qui permettra d’ajouter un item à notre liste. Pour cela nous allons créer une nouvelle vue AddItemView qui sera affichée quand l’utilisateur cliquera sur le bouton “Ajouter”.

#Créer la vue

1. Créer un nouveau fichier (CMD+N) et sélectionnez SwiftUI View, nommez le fichier AddItemView et cliquez sur Create.

Dans cette vue nous allons créer un formulaire comme sur la maquette suivante :

Voici la syntaxe pour créer un formulaire :

// AddItemView.swift
var body: some View {
       //....
        Form { // Wrapper de notre formulaire
            Section { // Correspond à une section du formulaire
                TextField("Nom de l'objet", text: $name)
                Picker("Rarete", text: $rarity) {
                    ForEach(Rarity.allCases) { rarity in
                        Text(String(describing: rarity).capitalized)
                    }
                }
            }
            /// ...
        }
    }

#🔧 Exercice 1

Faites en sorte que le formulaire fonctionne dans la preview.

• Vous devrez créer un Enum Rarity qui contiendra les valeurs suivantes : common, uncommon, rare, epic, legendary, unique, par défaut dans notre formulaire : common
• Vous devrez créer 2 variables avec @State : name et rarity. Qui seront bindé aux champs du formulaire.
• Ajouter un bouton “Ajouter” en bas du formulaire. Pour valider l’ajout, il n’y a pas besoin de faire une action pour le moment.

🛟 Reprenez vos exercices Swift sur les enums pour vous aider.

#Bouton d’ouverte de la vue

Maintenant que nous avons notre vue, nous allons l’appeler depuis notre vue principale ContentView.

Comme vous le voyez dans la maquette, notre bouton pour ouvrir la page d’ajout est situé dans la barre de navigation. Sauf que nous n’en n’avons pas encore.

Voici comment l’ajouter :

• Entourons notre List dans un NavigationStack et ajoutons un bouton dans la barre de navigation

// ContentView.swift
NavigationStack {
    List {
        // ...
    }
    .navigationBarTitle("Loot") // Notre titre de page, choisissez le titre que vous voulez
    .toolbar(content: { // La barre d'outil de notre page
        ToolbarItem(placement: ToolbarItemPlacement.automatic) {
            Button(action: {
                showAddItemView.toggle() // L'action de notre bouton
            }, label: {
                Image(systemName: "plus.circle.fill") 
            })
        }
    })
}

🛟 Décortiquons ce code :

1. NavigationStack permet d’ajouter une barre de navigation à notre vue, mais il va aussi gérer la pile de navigation, c’est à dire que si nous ouvrons une nouvelle vue, il va gérer le retour à la vue précédente.
2. Nous pouvons lui ajouter un modifier ➡️ navigationBarTitle qui va ajouter un titre à notre barre de navigation.
3. Nous pouvons lui ajouter un modifier ➡️ toolbar qui va ajouter une barre d’outils à notre barre de navigation.
4. Dans notre barre d’outils nous allons ajouter un ToolbarItem qui va contenir un Button qui va permettre d’ouvrir notre vue d’ajout.
5. Le placement permet de définir où sera placé notre bouton dans la barre de navigation. Ici nous avons choisi automatic qui va le placer à droite.
6. Le label est le contenu de notre bouton, ici nous avons choisi une image. Nous utiliserons le système d’icône de SF Symbols qui est la bibliothèque d’icone native d’Apple.

#Ouvrir la vue

1. Dans ContentView nous allons ajouter une variable @State qui sera un Bool et qui s’appellera showAddItemView et qui sera initialisé à false.

Cette variable représentera l’état d’ouverture de notre vue d’ajout. Si elle est à true alors la vue sera ouverte, sinon elle sera fermée.

2. Puis allons ajouter un modifier ➡️ sheet à notre List qui va permettre d’ouvrir notre vue d’ajout.

// ContentView.swift
NavigationStack {
    List {
        // ...
    }.sheet(isPresented: $showAddItemView, content: {
        AddItemView()
    })
}

🧑‍🚀 Voilà ! Au clique sur le bouton “Ajouter” notre vue d’ajout devrait s’ouvrir.

C’est probablement contre-intuitif si l’on vient d’un framework impératif : Modifier une variable qui n’a rien à voir avec notre vue d’ajout pour l’ouvrir.

Mais c’est le principe de la programmation déclarative. Nous déclarons l’état cible de notre application et non pas comment elle doit parvenir à cet état.

#Ressources

• En apprendre plus sur les toolbar

Data Flow de SwiftUI