前言
xcode 13.2
ios 15.2
在OC、Swift 中底部是UITabBarController, 但是在SwiftUI中是设置tabItem
SwiftUI使用用 TabView 和 tabItem () 来创建 TabBar
导航视图非常适用于创建层次化的视图栈,让用户可以层层深入数据,但它们对于不相关的数据则不那么合适。 对于那种数据,我们需要用到 SwiftUI 的 TabView,它会在屏幕底部创建一排不带边框的按钮,每次点击不同的按钮显示不同的视图。
除了能让我们点击 tab 项切换视图,SwiftUI 还允许我们通过使用状态来程序化控制当前视图。这种方式需要以下几个步骤:
1、创建一个记录当前正在显示的视图的 @State 属性。
首先是一个记录当前 tab 的状态,把下面这个属性添加到 ContentView:
设置枚举,或者设置int数字都可以
2、把这个属性以 binding 的形式传给 TabView,以便它能够被自动跟踪,并告诉 SwiftUI 对应属性的每种值应该显示哪个 tab。
2.1把TableView放到 NavigationView 下面
1、使下级页面不在显示底部tabItem
2、后续push或当前页面不用再设置NavigationView,(如果设置,会多出一个导航栏的高度)
struct ContentView: View {
@State private var selection: Tab = .study
enum Tab {
case featured
case list
case study
case mine
}
var body: some View {
NavigationView {
//整体设置,下级页面不会在出现底部tabbar
TabView(selection: $selection) {
CategoryHome()
.tabItem{
//使用label 创建tabitem图文
Label("Featured", systemImage: "star")
}
.tag(Tab.featured)
LandmarkList()
.tabItem{
Label("List", systemImage: "list.bullet")
}
.tag(Tab.list)
YLStudy()
.tabItem {
//设置tabitem图文方法
if self.selection == .study {
Image("tabbar_study_select")
} else {
Image("tabbar_study")
}
Text("发现")
}
.tag(Tab.study)
YLMine()
.tabItem {
if self.selection == .mine {
Image("tabbar_mine_select")
} else {
Image("tabbar_mine")
}
Text("我的")
}
.tag(Tab.mine)
}
.accentColor(.red) //设置文字默认选中颜色
}
}
}