Ninjiacoder Swift Lover, Fullstack Developer

SwiftUI 跳坑记(一)

这个系列的文章将记录我在学习和开发中使用 SwiftUI 时跳过的坑和有趣的经历

今天应该是我正式学习 SwiftUI 的第一天,因为一个宏伟的想法给了我学习的动力(别出新的框架了,学不动了!

每一个学习 App 开发的新手,应该都会写一个 Todo 类的应用,学习 SwiftUI 也不例外,于是想到了之前微博上有人分享的 SwiftUITodo,打算也从这个入手。

于是学习的第一步就是研究一下列表怎么写,在 UIKit 中,用到的是 UITableView 再加上 UITableViewDataSourceUITableViewDelegate,代码量着实很大。在看了今年 WWDC 上关于 SwiftUI List 的内容,就意识到 SwiftUI 在写列表上节省了很多的代码。

于是照着 SwiftUI List 这边教程的写法:

List(0..<5) { item in
    Text("Hello World !")
}.navigationBarTitle(Text("List"), displayMode: .large)

嗯,是不是很简单。在项目创建的模版中写上这段代码,列表的确没有问题,但是问题来了,这个 navigationBar 没有显示啊,咦?SwiftUI 出 bug 了?我还特地 clone 了 SwiftUITodo 这个项目来看

List {
      TextField($draftTitle, placeholder: Text("Create a New Task..."), onCommit: self.createTask)
      ForEach(self.userData.tasks) { task in
        TaskItemView(task: task, isEditing: self.$isEditing)
      }
    }
    .navigationBarItem(title: Text("Tasks"))
    .navigationBarItems(trailing: Button(action: { self.isEditing.toggle() }) {
      if !self.isEditing {
        Text("Edit")
      } else {
        Text("Done").bold()
      }
    })

也就是加了 navigationBarItem 就显示了啊?真奇怪了。

于是上官方文档找答案,正好有一篇官方教程叫 Building List and Navigation 然后首先找 Navigation 终于找到了答案,你当前都没有 NavigationView 怎么会有 Bar 呢?

所以在 List 外面套一层 NavigationView 之前写的 NavigationBar 就出来了。

参考资料

  1. Building List and Navigation
  2. SwiftUI List
  3. SwiftUITodo