Implémentation

• Créer une application iOS

  Démarrez Xcode et sélectionnez Create a new Xcode project (Créer un projet Xcode) dans l'écran d'introduction :

  

  Sous iOS, Application, sélectionnez Single View App (Application à affichage unique) et cliquez sur Suivant :

  

  Renseignez le nom de votre projet, par exemple iOS Getting Started. Vérifiez que la langue est définie sur Swift et l'interface sur SwiftUI, puis cliquez sur Suivant :

  

  Pour finir, sélectionnez un répertoire et cliquez sur Créer pour créer le projet.

• Mettre à jour l'affichage principal

  Dans la liste de fichiers à gauche de Xcode, ouvrez ContentView.swift et remplacez le code par le contenu suivant :

  import SwiftUI
  
  // singleton object to store user data
  class UserData : ObservableObject {
      private init() {}
      static let shared = UserData()
  
      @Published var notes : [Note] = []
      @Published var isSignedIn : Bool = false
  }
  
  // the data class to represents Notes
  class Note : Identifiable, ObservableObject {
      var id : String
      var name : String
      var description : String?
      var imageName : String?
      @Published var image : Image?
  
      init(id: String, name: String, description: String? = nil, image: String? = nil ) {
          self.id = id
          self.name = name
          self.description = description
          self.imageName = image
      }
  }
  
  // a view to represent a single list item
  struct ListRow: View {
      @ObservedObject var note : Note
      var body: some View {
  
          return HStack(alignment: .center, spacing: 5.0) {
  
              // if there is an image, display it on the left
              if (note.image != nil) {
                  note.image!
                  .resizable()
                  .frame(width: 50, height: 50)
              }
  
              // the right part is a vertical stack with the title and description
              VStack(alignment: .leading, spacing: 5.0) {
                  Text(note.name)
                  .bold()
  
                  if ((note.description) != nil) {
                      Text(note.description!)
                  }
              }
          }
      }
  }
  
  // this is the main view of our app, 
  // it is made of a Table with one line per Note
  struct ContentView: View {
      @ObservedObject private var userData: UserData = .shared
  
      var body: some View {
          List {
              ForEach(userData.notes) { note in
                  ListRow(note: note)
              }
          }
      }
  }
  
  // this is use to preview the UI in Xcode
  struct ContentView_Previews: PreviewProvider {
      static var previews: some View {
  
          let _ = prepareTestData()
  
          return ContentView()
      }
  }
  
  // this is a test data set to preview the UI in Xcode
  func prepareTestData() -> UserData {
      let userData = UserData.shared
      userData.isSignedIn = true
      let desc = "this is a very long description that should fit on multiiple lines.\nit even has a line break\nor two."
  
      let n1 = Note(id: "01", name: "Hello world", description: desc, image: "mic")
      let n2 = Note(id: "02", name: "A new note", description: desc, image: "phone")
  
      n1.image = Image(systemName: n1.imageName!)
      n2.image = Image(systemName: n2.imageName!)
  
      userData.notes = [ n1, n2 ]
  
      return userData
  }

  Que venons-nous d'ajouter ?

  • Nous avons créé une classe Note pour stocker les données des notes. Nous avons utilisé deux propriétés distinctes pour ImageName et Image. Nous nous occuperons d'Image plus tard dans la section Ajouter le stockage.
  • Nous avons créé une classe UserData pour contenir les données spécifiques de l'utilisateur, à ce stade, juste une liste d'objets Note.
  • L'affichage principal ContentView contient une liste de ListRow.
  • Chaque ligne est rendue par un ListRow : une pile horizontale avec une image et du texte. Le texte est une pile verticale avec le nom de la note, en gras, et la description de la note.
  • Pour finir, nous avons ajusté ContentView_Previews et ajouté prepareTestData() pour permettre un rendu préliminaire dans le canevas.
• Développement et test

  Vérifiez le canevas pour vous assurer que la mise en page est bien celle souhaitée. Si vous ne voyez pas le canevas, vous pouvez l'activer au moyen du menu Éditeur, puis cliquez sur Canevas. Vous devrez peut-être également cliquer sur le bouton reprise dans le canevas pour générer l'aperçu de la mise en page.

  

  Notez que les données pour l'aperçu sont générées dans le code (à partir de la ligne 70), les données n'apparaissent pas à l'exécution. Si tout semble OK, générez et lancez l'application dans le simulateur. Cliquez sur le menu Produit et sélectionnez Exécuter ou tapez  . Vous pouvez aussi cliquer sur le bouton Lire ▶️ dans la barre d'outils.

  

  Après quelques instants, l'application démarre dans le simulateur iOS, avec un écran initial vide. Les données d'aperçu ne sont pas restituées à l'exécution, elles sont uniquement conçues pour les aperçus à l'intérieur de Xcode.