實作

• 建立 iOS 應用程式

  啟動 Xcode 並從初始螢幕中選取 Create a new Xcode project (建立新的 Xcode 專案)：

  

  在 iOS, Application (iOS、應用程式)下，選取 Single View App (單一檢視應用程式)，然後按一下 Next (下一步)︰

  

  輸入專案的名稱，例如 iOS 入門。確保將語言設定為 Swift，並將使用者界面設定為 SwiftUI，然後按一下 Next (下一步)︰

  

  最後，選取​擇一個目錄，然後按一下 Create (建立)，以建立專案。

• 更新主要檢視

  在 Xcode 左側的檔案清單中，開啟 ContentView.swift，然後將程式碼取代為以下內容：

  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
  }

  我們剛新增了什麼？

  • 我們建立了一個附註類別，來存放附註的資料。我們對 ImageName 和影像使用了兩個不同的屬性。稍後，我們將在 Add Storage (新增儲存體) 部分中處理影像。
  • 我們建立了一個 UserData 類別，來保存特定使用者的資料，在這個階段，只是附註物件清單。
  • 主要檢視 ContentView 包含 ListRow 清單
  • 每行由一個 ListRow 呈現：包含影像和文字的水平堆疊。文字為垂直堆疊，帶有粗體附註名稱，以及附註說明。
  • 最後，我們調整了 ContentView_Previews 並新增 prepareTestData()，以允許在畫布中進行預覽呈現。
• 建置和測試

  檢查畫布以確認版面配置是否符合要求。如果看不到畫布，則可使用 Editor (編輯器) 功能表來啟用，然後按一下 Canvas (畫布)。您可能還需要按一下 Canvas (畫布) 中的 resume (恢復) 按鈕，以產生版面配置預覽。

  

  請注意，預覽資料在程式碼中產生 (從第 70 行開始)，該資料不會在執行時間出現。如果一切正常，請在模擬器中建置並啟動該應用程式。按一下 Product (產品) 功能表，然後選取 Run (執行) 或輸入 。或者，您可以按一下工具列中的 Play (播放) ▶️ 按鈕。

  

  一段時間後，該應用程式將在 iOS 模擬器中啟動，並顯示初始空白螢幕。 預覽資料不會在執行時間呈現，它們僅用於 Xcode 中的預覽。