目录基本TabViewselection参数为什么是无效的修饰选项卡按钮诡异文字一定在下方图片只取一个图片自动变成了.fill修饰选项卡底部导航选中项的颜色选中非选中使用不同图片选项卡视图样式.tabViewStyle(.automatic)或.sidebarAdaptable或.tabBarOnly.tabViewStyle(.page).page风格的显示模式基本TabViewTabView的每个子项是一个选项卡底部自动实现选项卡按钮import SwiftUI struct SwiftUIViewTab: View { State var selectedTab 0 var body: some View { Text(当前选项卡 \(selectedTab)) TabView(selection: $selectedTab) { Text(Tab1) Text(Tab2) } } }TabView的selection参数不是必须的我们使用这个可以观察效果给TabView加个边框可以看到按钮位置大部分在边框内、小部分在边框外大部分情况下我们会单独实现每个选项卡页面直接使用视图名字即可。selection参数为什么是无效的不管设置成0还是1初始都是显示第一个选项卡选项改变的时候也不会更新变量。这其实是因为selection对应的是tag而我们没有给选项卡设置tag增加tag之后就有效了TabView(selection: $selectedTab) { Text(Tab1).tag(0) Text(Tab2).tag(10) InputView().tag(20) }.border(.blue)我故意没有用连续整数编号效果修饰选项卡按钮选项卡按钮使用tabItem来修饰参数是一个视图。也就是可以是文字也可以是图片也可以是任何组合的复杂视图。多数情况下使用文字和图片的组合TabView(selection: $selectedTab) { Text(Tab1).tag(0).tabItem{Image(systemName: magnifyingglass);Text(搜索)} Text(Tab2).tag(10).tabItem{Image(systemName: square.and.arrow.up);Text(分享)} InputView().tag(20).tabItem{Image(systemName: play);Text(播放)} }.border(.blue)效果注意文字是放在下方的看起来合理但是……诡异文字一定在下方图片只取一个虽然参数是个视图但是解读方式很诡异看下面的代码Text(Tab1).tag(0).tabItem{Text(搜索);Image(systemName: magnifyingglass)} Text(Tab2).tag(10).tabItem{Text(分享);Image(systemName: square.and.arrow.up)} InputView().tag(20).tabItem{HStack{Text(播放);Image(systemName: stop);Image(systemName: pause)}}文字在前面第三个选项卡强制了HStack而且有两个图片但效果是也就是说tabItem只是去视图里面找了第一个文字和第一个图片然后按照图片在上文字在下的方式来显示。实际上tabItem确实做了特殊处理。当然不能说这想法不对但是既然只要文字和图片的内容为什么不是分开两个参数呢美工主导设计不行啊。导航视图为什么没有这个限制图片自动变成了.fill注意后两个选项卡的图片都没有“.fill后缀”第一个选项卡的图片没有对应的.fill图片修饰选项卡底部导航选中项的颜色默认选中项为蓝色可以用.accentColor()修改TabView(selection: $selectedTab) { 。。。。。。 } .accentColor(.red)效果选中非选中使用不同图片可以根据是否选中来使用不同的不图片方法是判断当前选中项tag是不是自己Text(Tab2).tag(10).tabItem{Text(分享);Image(systemName: selectedTab 10 ? square.and.arrow.up : square.and.arrow.down)}未选中效果图片为向下箭头选中的效果图片为向上箭头选项卡视图样式.tabViewStyle(.automatic)或.sidebarAdaptable或.tabBarOnly默认样式底部按钮导航不能左右滑动。.tabViewStyle(.page)这个样式没有底部导航栏只能用左右滑动改变选中项TabView(selection: $selectedTab) { 。。。。。。 } .tabViewStyle(.page)效果.page风格的显示模式.page风格默认不显示按钮这样就不太清楚到底有几个选项卡。可以通过设置来显示.tabViewStyle(.page) .indexViewStyle(.page(backgroundDisplayMode: .always))效果这小按钮是可以点击的但是文字没有了图片的风格也有所不同。如果没有图片就是常见的圆点导航圆点也是能点的只是很不容易点中。