SwiftUI 实现静态&动态TabView
前言:最近跟着SwiftUI 源码教程基本跑了一遍。自己并尝试写一些基本的语法或小功能,在写 导航视图便于我们创建分层的视图堆栈,方便用户能够向下获取数据,但对于显示不相关的数据而言效果不佳。为此,我们需要使用 1、将选项卡放置在TabView中,通过 除了让用户通过点击其标签项来切换视图之外, 创建一个 每当我们想跳到另一个选项卡时,将该属性修改为一个新值; 将其作为绑定传递到 告诉 第一、我们需要某种状态来跟踪当前选项卡,因此将其作为属性添加到 第二、我们需在某处进行修改时,这将要求 第三、我们需要将 当我们说 在更深层次上,它还分解了 对于 现在我们可以在选项卡之间来回切换。 当然,仅使用0和1是不理想的——这些值是固定的,因此可以解决视图四处移动的问题,但它们不容易记住。所幸的是我们可以改用字符串:给每个视图有且只有唯一且反映其目的的字符串标记,然后将其用于 提示:通常要同时使用 逻辑与静态 考虑到TabView的内容常规是4个,所以用SwiftUI
时,要尝试抛开Objective-C
的思想,两者完全不同的概念,SwiftUI
多协议,此View
非彼View
,只有码的过程中才会深有感触...静态
TabView
SwiftUI
的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)}
@State
属性。从长远来看,这更容易使用,对比整数更建议使用。NavigationView
和TabView
,但要注意:TabView
Tex 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
,然后创建新的。这个开销可能会造成性能的损失。应该有相关优化的方案~~~总结
SwiftUI
写没必要设置成动态的TabView
,静态TabView
就满足大部分APP了,并且TabView
对应几个content就定义几个func
,条理也清晰。
3人点赞
Swift&SwiftUI
作者:Bepawbikvy
链接:https://www.jianshu.com/p/c476abe6e295
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。