SwiftUI 实现静态&动态TabView
SwiftUI 官方文档
SwiftUI 源码教程
GitHub Package 论坛
前言：最近跟着SwiftUI 源码教程基本跑了一遍。自己并尝试写一些基本的语法或小功能，在写SwiftUI时，要尝试抛开Objective-C的思想，两者完全不同的概念，SwiftUI多协议，此View非彼View，只有码的过程中才会深有感触...
静态TabView
导航视图便于我们创建分层的视图堆栈，方便用户能够向下获取数据，但对于显示不相关的数据而言效果不佳。为此，我们需要使用SwiftUI的TabView，它会在屏幕底部创建一个按钮条，点击每个按钮会显示一个不同的视图。
1、将选项卡放置在TabView中，通过tabItem()修饰符, 可以自定义视图在选项卡栏中的显示方式，从而在其旁边提供图像和一些文本:
TabView {
Text("Tab 1")
.tabItem {
Image(systemName: "star")
// Image("homepageSelect" )
Text("Homepages")
}
Text("Tab 2")
.tabItem {
Image(systemName: "star.fill")
Text("My Parcels")
}
}
除了让用户通过点击其标签项来切换视图之外，SwiftUI还允许我们使用状态以编程方式控制当前视图。操作步骤如下：
- 创建一个
@State属性以跟踪当前显示的选项卡； - 每当我们想跳到另一个选项卡时，将该属性修改为一个新值；
- 将其作为绑定传递到
TabView中，因此将自动对其进行跟踪； - 告诉
SwiftUI应该为该属性的每个值显示哪个选项卡。
第一、我们需要某种状态来跟踪当前选项卡，因此将其作为属性添加到ContentView：
@State private var selectedTab = 0
第二、我们需在某处进行修改时，这将要求SwiftUI切换选项卡。我们可以将onTapGesture()修饰符附加到第一个选项卡，如下所示：
TabView {
.onTapGesture {
self.selectedTab = 1
}
Text("Homepages ")
.tabItem {
Image(systemName: "star")
// Image("homepageSelect" )
Text("Homepages")
}
第三、我们需要将TabView的选择绑定到$selectedTab。当我们创建TabView时，它将作为参数传递，因此将你的代码更新为：
TabView (selection: $selectedTab) {...}
当我们说self.selectedTab = 1时，SwiftUI如何知道Tab1是哪个Tab？你可能会认为这些Tab可以被视为一个数组，在这种情况下，第二个Tab将位于索引1处，但这会引起各种问题：如果我们将该 Tab 移至Tab视图中的其他位置，该怎么办？
在更深层次上，它还分解了SwiftUI的核心概念之一：我们应该能够自由地组合视图。如果Tab 1是数组中的第二项，则：
-
Tab 0是第一个tab。 -
Tab 1是第二个tab。 -
Tab 0具有显示Tab 1的onTapGesture()。
对于Tab 0对如何配置其父项TabView具有深入的了解。SwiftUI提供了更好的解决方案：我们可以为每个视图附加一个唯一的标识符，并将其用于选定的标签。这些标识符称为标签，并使用tag()修饰符附加，如下所示：
TabView (selection: $selectedTab) {
HomePageView()
.font(.title/)
.onTapGesture {
self.selectedTab = 1
}
.tabItem {
Image(self.selectedTab == 0 ? "homepageSelected" : "homepage")
// .frame(width: 50, height: 50, alignment: .center)
Text("Homepages")
}
.tag(0)
// MyPacelsView()
.tabItem {
Image(self.selectedTab == 1 ? "parclesSelect" : "parcles")
Text("My Parcels")
}
.tag(1)
}
现在我们可以在选项卡之间来回切换。
当然，仅使用0和1是不理想的——这些值是固定的，因此可以解决视图四处移动的问题，但它们不容易记住。所幸的是我们可以改用字符串：给每个视图有且只有唯一且反映其目的的字符串标记，然后将其用于@State属性。从长远来看，这更容易使用，对比整数更建议使用。
提示：通常要同时使用NavigationView和TabView，但要注意：TabViewTex parse error!NavigationView, 而不是相反。
动态TabView
逻辑与静态TabView 一样 ，这里我就直接上代码。如下：
import SwiftUI
struct HomePageView: View {
var body: some View {
VStack {
Image("homepage")
Text("wkk ")
.font(.system(size: 50))
}
}
}
struct MyParclesView: View {
var body: some View {
VStack {
Image("parcles")
Text("My Parcels")
.font(.system(size: 50))
}
}
}
struct TabElement {
var id: Int
var title: String
var image: String
var imageSelect: String
}
let itemList: [TabElement] = [
TabElement(id: 0, title: "Homepages", image: "homepage", imageSelect: "homepageSelected"),
TabElement(id: 1, title: "My Parcels", image: "parcles", imageSelect: "parclesSelect"),
TabElement(id: 2, title: "Booking", image: "booking", imageSelect: "bookingSelect"),
TabElement(id: 3, title: "Me", image: "me", imageSelect: "meSelect"),
]
struct ContentView: View {
@State private var selectedTab = 0
var body: some View {
NavigationView {
VStack {
TabView(selection: $selectedTab) {
ForEach(itemList, id: \.id) { i in
self.viewForTab(i)
}
}
}
}
}
private func viewForTab(_ item: TabElement) -> some View {
// print(item.title)
return contentForTab(item)
.tabItem {
Image(self.selectedTab == item.id ? item.imageSelect: item.image)
Text((self.selectedTab == 0 && item.id == 0) ? "" : item.title)
}.tag(item.id)
}
private func contentForTab(_ item: TabElement) -> some View {
switch item.id {
case 0:
return AnyView(HomePageView())
case 1:
return AnyView(MyParclesView())
default:
return AnyView(HomePageView())
}
}
// 用于打印log
func log(_ log: String) -> EmptyView {
print("** \(log)")
return EmptyView()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
注意: 每个TabView遍历对应的content，需要AnyView()达到类型擦除视图。但是AnyView可能会存在性能问题。他先销毁就hierarchy,然后创建新的。这个开销可能会造成性能的损失。应该有相关优化的方案~~~
总结
考虑到TabView的内容常规是4个，所以用SwiftUI写没必要设置成动态的TabView，静态TabView就满足大部分APP了，并且TabView对应几个content就定义几个func，条理也清晰。
