实施

• 创建 iOS 应用程序

  启动 Xcode 并从闪屏中选择创建新的 Xcode 项目：

  

  在 iOS 应用程序下，选择单一视图应用程序，然后单击下一步：

  

  键入项目的名称，例如 iOS 入门。确保将语言设置为 Swift 且用户界面为 SwiftUI，然后单击下一步：

  

  最后，选择一个目录，然后单击创建以创建项目。

• 更新主视图

  从 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 和 Image 使用了两个不同的属性。稍后，我们将在“添加存储”部分中处理图像。
  • 我们创建了一个 UserData 类来保存特定用户的数据，在此阶段，只保存一个备注对象列表。
  • 主视图 ContentView 包含 ListRow 的列表
  • 每行都由 ListRow 呈现：包含图像和文本的水平堆栈。文本垂直堆栈备注名称和备注说明，以粗体显示。
  • 最后，我们调整了 ContentView_Previews 并添加了 prepareTestData() 以允许在画布中进行预览渲染。
• 构建和测试

  检查画布以验证布局是否满足需要。如果看不到画布，可以使用编辑器菜单启用画布，然后单击 画布。您可能还需要单击画布中的恢复按钮以生成布局预览。

  

  请注意，预览数据是在代码中生成的（从第 70 行开始），数据不会在运行时显示。如果一切正常，请在模拟器中构建并启动应用程序。单击产品菜单，然后选择运行或键入  。或者，您也可以单击工具栏中的播放 ▶️ 按钮。

  

  一段时间后，应用程序会在 iOS 模拟器中启动，初始屏幕为空。 预览数据不会在运行时呈现，它们仅用于 Xcode 内的预览。