阅读 106

[Swift UI 100] Hot Prospect 构建 tab bar

译自 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 中找出来的。

ContentViewbody 属性替换为下面的代码:

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_Previewsbody 修改为:

ProspectsView(filter: .none)
复制代码

然后把 ContentView 里的三个 ProspectsViewfilter 分别配置为:.none.contacted 和 .uncontacted

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


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

Swift花园微信公众号