译自 www.hackingwithswift.com/books/ios-s…

更多内容，欢迎关注公众号「Swift花园」

喜欢文章？不如来个 🔺💛➕三连？关注专栏，关注我 🚀🚀🚀

构建我们的 tab bar

这个应用将在 tab bar 里显示四个 SwiftUI 视图：一个显示你遇见的人，一个显示你联络的人，一个显示你还没接触的人，最后一个显示你的个人信息，以便其他人可以扫描。

前三个视图是一个概念上的三个变体，最后一个差异较大。因此，我们只需要三个视图就可以表示全部的 UI：一个用来显示人，一个用来显示数据，最后一个用 TabView 把所有其他视图组合到一起。

我们的第一步是为每个 tab 创建占位符视图，稍后再回来填充。点击 Cmd+N，创建一个新的 SwiftUI 视图，取名为 “ProspectsView”，然后创建另一个 SwiftUI 视图，取名 “MeView”。现在，先保留两个视图默认的 “Hello, World!” 文本视图。

首先需要修改 ContentView，因为这里是存储 TabView 的地方。TabView 进一步包含了 UI 中其他的视图。我们稍后添加更多逻辑，不过现在只需要一个 TabView，加上三个 ProspectView 和一个 MeView。每个 tab 视图都有一个 tabItem()modifier，它们的图像是我从 SF Symbols 中找出来的。

把 ContentView 的 body 属性替换为下面的代码：

TabView {
    ProspectsView()
        .tabItem {
            Image(systemName: "person.3")
            Text("Everyone")
        }
    ProspectsView()
        .tabItem {
            Image(systemName: "checkmark.circle")
            Text("Contacted")
        }
    ProspectsView()
        .tabItem {
            Image(systemName: "questionmark.diamond")
            Text("Uncontacted")
        }
    MeView()
        .tabItem {
            Image(systemName: "person.crop.square")
            Text("Me")
        }
}

运行代码，你将看到屏幕底部有一条整齐的 tab 栏，点击 tab 可以在不同的四个视图间切换。

显而易见的是，三个 ProspectView 在实践中很奇怪，因为它们会一模一样，但我们可以通过定制每个视图来解决这个问题。记住，我们要让第一个视图显示你遇到的每个人，第二个视图显示你联络过的人，第三个视图显示你还没有联络过的人，因此我们可以用一个枚举来表示三种情形。

在 ProspectsView 里添加下面这个枚举：

enum FilterType {
    case none, contacted, uncontacted
}

基于这个枚举，我们让每一个 ProspectsView 略有不同：

let filter: FilterType

先借助一个计算属性简单定制 ProspectsView：

var title: String {
    switch filter {
    case .none:
        return "Everyone"
    case .contacted:
        return "Contacted people"
    case .uncontacted:
        return "Uncontacted people"
    }
}

把默认的 “Hello, World!” 的 body 文本替换成下面的代码：

NavigationView {
    Text("Hello, World!")
        .navigationBarTitle(title)
}

如此一改，通过标题的差异至少可以确认 tab 能够正常工作。

为了编译通过，需要给 ProspectsView 的构造器提供 filter 参数，把 FilteredView_Previews 的 body 修改为：

ProspectsView(filter: .none)

然后把 ContentView 里的三个 ProspectsView 的 filter 分别配置为：.none，.contacted 和 .uncontacted。

运行应用，看起来好多了：接下来是真正的挑战：三个相似视图目前是使用同一份数据，我们要如何共享这份数据呢？这里需要借助 SwiftUI 的 environment…

我的公众号这里有Swift及计算机编程的相关文章，以及优秀国外文章翻译，欢迎关注～

[Swift UI 100] Hot Prospect 构建 tab bar

构建我们的 tab bar