Implementierung

• Erstellen einer iOS-Anwendung

  Starten Sie Xcode und wählen Sie im Startbildschirm die Option Neues Xcode-Projekt erstellen:

  

  Unter iOS, Anwendung wählen Sie Einzelansicht-App und klicken Sie auf Weiter:

  

  Geben Sie einen Namen für Ihr Projekt ein, zum Beispiel iOS Erste Schritte. Stellen Sie sicher, dass die Sprache auf "Swift" und die Benutzeroberfläche auf "SwiftUI" eingestellt ist, und klicken Sie dann auf "Weiter:"

  

  Wählen Sie schließlich ein Verzeichnis aus und klicken Sie auf Erstellen, um das Projekt zu erstellen.

• Aktualisieren der Hauptansicht

  Öffnen Sie in der Dateiliste links von Xcode ContentView.swift und ersetzen Sie den Code durch diesen Inhalt:

  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
  }

  Was haben wir gerade hinzugefügt?

  • Wir haben eine Notiz-Klasse erstellt, um die Daten von Notizen zu speichern. Wir haben zwei unterschiedliche Eigenschaften für ImageName und Image verwendet. Um Image kümmern wir uns später im Abschnitt Speicher hinzufügen.
  • Wir haben eine UserData-Klasse erstellt, die bestimmte Benutzerdaten enthält, in diesem Stadium nur eine Liste von Notizobjekten.
  • Die Hauptansicht ContentView enthält eine Liste der ListRow's
  • Jede Zeile wird durch eine ListRow gerendert: ein horizontaler Stapel mit einem Bild und Text. Text ist ein vertikaler Stapel mit dem Namen der Notiz in Fettdruck und der Beschreibung der Notiz.
  • Schließlich haben wir ContentView_Previews angepasst und prepareTestData() hinzugefügt, um ein Vorschau-Rendering in der Leinwand zu ermöglichen.
• Erstellen und testen

  Überprüfen Sie den Canvas, um sicherzustellen, dass das Layout wie gewünscht ist. Wenn Sie den Canvas nicht sehen, können Sie ihn über das Menü Editor aktivieren und dann auf Canvas klicken. Möglicherweise müssen Sie auch auf die Schaltfläche Fortsetzen im Canvas klicken, um die Vorschau des Layouts zu generieren.

  

  Beachten Sie, dass die Daten für die Vorschau im Code generiert werden (ab Zeile 70), die Daten erscheinen nicht zur Laufzeit. Wenn alles in Ordnung aussieht, bauen und starten Sie die Anwendung im Simulator. Klicken Sie auf das Menü Produkt und wählen Sie Ausführen oder geben Sie ein. Alternativ können Sie auf die Schaltfläche Play ▶️ in der Symbolleiste klicken.

  

  Nach einer Weile startet die Anwendung im iOS-Simulator mit einem leeren Anfangsbildschirm. Die Vorschaudaten werden nicht zur Laufzeit gerendert, sie sind nur für Vorschauen innerhalb von Xcode bestimmt.