SwiftUI 使用TabView创建底部导航栏的小案例

import SwiftUI

struct FirstUIView: View {
    @State var show = true
    var body: some View {
        TabView{
            PageOneUIView()
                .tabItem {
                    Image(systemName: "house")
                    Text("Home")
                }
            PageTwoUIView()
                .tabItem {
                    Image(systemName: "gear")
                    Text("Gear")
                }
            PageThreeUIView()
                .tabItem {
                    Image(systemName: "person")
                    Text("Me")
                }
        }
    }
}
struct PageOneUIView:View{
    var body: some View{
        VStack(alignment: .leading, content: {
            HStack{
                Spacer()
            }
            Text("Page One")
            Spacer()
        })
        .background(Color.gray.opacity(0.3))
    }
}
struct PageTwoUIView:View{
    var body: some View{
        VStack(alignment: .leading, content: {
            HStack{
                Spacer()
            }
            Text("Page Two !")
            Spacer()
        })
        .background(Color.purple.opacity(0.3))
    }
}
struct PageThreeUIView:View{
    var body: some View{
        VStack(alignment: .leading, content: {
            HStack{
                Spacer()
            }
            Text("Page Three !")
            Spacer()
        })
        .background(Color.orange.opacity(0.3))
    }
}

struct FirstUIView_Previews: PreviewProvider {
    static var previews: some View {
        FirstUIView()
    }
}