UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

I do not understand how to use the Tab View properly

Forums > SwiftUI

When I make a ContentView, putting TabView as a parent of NavigationView and compiling my program, I see many tabs at the same time on my Mac. I am using IPad target running on my M1 Mac.

2      

@Bnerd  

I am not sure I undestand completely your problem but look below:

A typical tabview shoule be like this

var body: some View {
        TabView {
            ViewOne()
                .tabItem {
                    Label("ViewOne", systemImage: "person.3")
                }
            ViewTwo()
                .tabItem {
                    Label("ViewTwo", systemImage: "person.2")
                }
        }

Tabview should be your first View element.,

2      

At the bottom of this page Paul gives a tip.

Tip: It’s common to want to use NavigationView and TabView at the same time, but you should be careful: TabView should be the parent view, with the tabs inside it having a NavigationView as necessary, rather than the other way around.

Although, it is a bit difficult to tell exactly what that means.

Should we wrap all of our tabs in a single NavigationView?

struct ContentView: View {
    @State private var selectedTab = "One"

    var body: some View {
        TabView(selection: $selectedTab) {
            NavigationView {
                Text("Tab 1")
                    .tabItem {
                        Label("One", systemImage: "star")
                    }
                    .tag("One")

                Text("Tab 2")
                    .tabItem {
                        Label("Two", systemImage: "circle")
                    }
                    .tag("Two")
            }
        }
    }
}

Or does each tab need its own NavigationView?

struct ContentView: View {
    @State private var selectedTab = "One"

    var body: some View {
        TabView(selection: $selectedTab) {
            NavigationView {
                Text("Tab 1")
            }
            .tabItem {
                Label("One", systemImage: "star")
            }
            .tag("One")

            NavigationView {
                Text("Tab 2")
            }
            .tabItem {
                Label("Two", systemImage: "circle")
            }
            .tag("Two")
        }
    }
}

I believe the second option is the correct way. However, if you are using your own custom Views instead of just Text Views, you could just wrap the entire body of the View that you have created in a NavigationView, and then you wouldn't need to worry about wrapping it in a NavigationView again when you are creating the TabView.

2      

Yes, the second way is correct.

2      

Ah, now I understand. I had a common navigation view, however it was the child of TabView. So it is not only me who misunderstood Paul haha.

2      

Hacking with Swift is sponsored by Essential Developer

SPONSORED Join a FREE crash course for mid/senior iOS devs who want to achieve an expert level of technical and practical skills – it’s the fast track to being a complete senior developer! Hurry up because it'll be available only until April 28th.

Click to save your free spot now

Sponsor Hacking with Swift and reach the world's largest Swift community!

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.