How to put Tabview into NavigationView?

App Development
1

picture
picture1089×676 16.3 KB

Hello! As you can see on the image I have the following problem: I have a tab view with tags and a tab bar(see code below). This tab bar brings me to View 1, 2, 3 and 4. Inside of these Views I have Navigationlinks, that bring me to their subviews. The problem? Now I want a Navigationlink from View 1 to View 2. I might also have to navigate from for example View1->subview to View2 ->subview. For this, I tried wrapping the Tabview into a NavigationView and deleting all other Navigationviews, but that caused weird UI behavior and also didn’t switch to a different screen. I also thought about changing the tabIndex of the Tabview, but then I can’t switch between subviews, and passing around data gets complicated. What is a good way of solving this?

struct MainView: View {
@State var tabIndex = 1
    var body: some View {

        TabView(selection: $tabIndex) {
            View1()
                .tabItem {
                    Label("1", systemImage: "list.dash")
                }.tag(0)

            View2()
                .tabItem {
                    Label("2", systemImage: "square.and.pencil")
                }.tag(1)

            View3()
                .tabItem {
                    Label("3", systemImage: "bus.fill")
                }.tag(2)

            View4()
                .tabItem {
                    Label("4", systemImage: "sun.min")
                }.tag(3)
   
        }
    }
}
2

You would compose your Views together and keep the NavigationView separate from the View content.

Here’s one way to do that…

struct MainView: View {
    @State var tabIndex = 0
    var body: some View {
        
        TabView(selection: $tabIndex) {
            NavigationView {
                View1()
            }
            .tabItem {
                Label("1", systemImage: "list.dash")
            }.tag(0)
            
            NavigationView {
                View2()
            }
            .tabItem {
                Label("2", systemImage: "square.and.pencil")
            }.tag(1)
            
            NavigationView {
                View3()
            }
            .tabItem {
                Label("3", systemImage: "bus.fill")
            }.tag(2)
            
            NavigationView {
                View4()
            }
            .tabItem {
                Label("4", systemImage: "sun.min")
            }.tag(3)
            
        }
    }
}

struct View1: View {
    var body: some View {
        NavigationLink("Go to View2") {
            View2()
        }
        .navigationTitle("View1")
    }
}

struct View2: View {
    var body: some View {
        NavigationLink("Go to View3") {
            View3()
        }
        .navigationTitle("View2")
    }
}

struct View3: View {
    var body: some View {
        NavigationLink("Go to View4") {
            View4()
        }
        .navigationTitle("View3")
    }
}

struct View4: View {
    var body: some View {
        NavigationLink("Go to View1") {
            View1()
        }
        .navigationTitle("View4")
    }
}
1 Like
3

Thank you very much! :smiley: Seems like this works