SwiftUI 设置底部TabBar（tabItem）

前言

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) //设置文字默认选中颜色
        }
    }
}