How to create a shared navigation bar to inter-navigate among multiple views in SwiftUI?-CodePudding

I would like to navigate among screens A, B, and C by tapping the corresponding button in a shared navigation bar at the bottom of every screen. How can I create such a toolbar to achieve this inter-navigability among screens?

CodePudding user response：

You would use a TabView {...} to accomplish this. Effectively you instantiate your views inside of the TabView then add an item modifier to each view.

var body: some View {
    TabView {
        Text("A")
            .tabItem { Text("A") }
        Text("B")
            .tabItem { Text("B") }
        Text("C")
            .tabItem { Text("C") }
    }


    init() {
        UITabBar.appearance().backgroundColor = UIColor.red
    }
}

What this code does: https://i.stack.imgur.com/CKBHm.gif

For added clarity, you can add any item you want to a TabView. It basically acts as a container for the views that you add.

struct ContentView: View {
    var body: some View {
        TabView {
            FirstView()
                .tabItem { Text("A") }
            SecondView()
                .tabItem { Text("B") }
            ThirdView()
                .tabItem { Text("C") }
        }
    }
}

struct FirstView: View {
    var body: some View {
        Text("A")
    }
}

struct SecondView: View {
    var body: some View {
        Text("B")
    }
}

struct ThirdView: View {
    var body: some View {
        Text("C")
    }
}

Custom Tab Bar

This is a very simple case where we simply swap out the parent VStack{} based on the enum that we created. When it's first initialized this would set the .first page and that would be the one displayed. Anytime we change it with a button action located in the HStack{} the view is updated. This is especially useful if you want to add something more to the tab bar beyond text or an image. You could also add the selectedPage to an @EnvironmentObject to have control of those pages from anywhere in the app. It's especially useful when creating logins or landing pages, where you need to swap the navigation stack.

struct ContentView: View {
    @State var selectedPage: SelectedPage = .first
    
    var body: some View {
        VStack {
            VStack {
                switch selectedPage {
                case .first:
                    FirstView()
                case .second:
                    SecondView()
                case .third:
                    ThirdView()
                }
            }
            
            Spacer()
            
            HStack {
                Button(action: { selectedPage = .first }, label: {
                    Text("A")
                })
                
                Spacer()
                
                Button(action: { selectedPage = .second }, label: {
                    Text("B")
                })
                
                Spacer()
                
                Button(action: { selectedPage = .third }, label: {
                    Text("C")
                })
            }.padding(.horizontal, 30)
        }
    }
}

enum SelectedPage {
    case first, second, third
}