0

I want to place a TabView inside a NavigationView with different titles depending on the selected tab. Inside those tabs I want to place a List view. See the code below:

 struct ContentView: View {
 @State private var selection = 1
 
 var body: some View {
     TabView(selection:$selection) {
         Page_1()
             .tabItem {
                 Image(systemName: "book")
                 Text("Page 1")
             }
             .tag(1)
         
         Page_2()
             .tabItem {
                 Image(systemName: "calendar")
                 Text("Page 2")
             }
             .tag(2)  
     }
   }
 }


 struct Page_1: View {
    @State var selectedTab = "1"
 
    var body: some View {
        NavigationView {
            TabView(selection: $selectedTab) {
                List {
                    ForEach(0..<20){i in
                        Text("Test")
                    }
                }
                .tag("1")
                .navigationBarTitle("Page 1 Tab 1")
             
                List {
                    ForEach(0..<20){i in
                        Text("Test")
                    }
                }
                .tag("2")
                .navigationBarTitle("Page 1 Tab 2")
            }
            .tabViewStyle(.page(indexDisplayMode: .never))
            .ignoresSafeArea(.all)
            .background()
        }
     }
 }


 struct Page_2: View {
    @State var selectedTab = "1"

    var body: some View {
       NavigationView {
        
          TabView(selection: $selectedTab) {
              List {
                ForEach(0..<20){i in
                    Text("Test")
                }
              }
              .tag("1")
              .navigationBarTitle("Page 2 Tab 1")
            
              List {
                 ForEach(0..<20){i in
                    Text("Test")
                 }
              }
              .tag("2")
              .navigationBarTitle("Page 2 Tab 2")
          }
          .tabViewStyle(.page)
          .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
          .ignoresSafeArea()
          .background()  
      }   
    }
 }

The problem is that when the Pages first appear the lists inside their TabViews seem to be placed slightly too low and then move up. You can see this especially when you switch tabs like here:

enter image description here

After switching back and forth between the tabs they are placed correctly until I freshly start the app again. Would really appreciate your help!:)

Edit

As suggested I tried to put the NavigationViews inside the TabView. That solves the problem with the wrong positioning. However, it leads to the views not being shown at all before I switch back and forth between them. You can see what that looks like in the picture below:

enter image description here

Simon Henn
  • 199
  • 7
  • Put the `NavigationView` inside each of the views in the `TabView`. This is the exception to the rule that `NavigationView` belongs at the top of the view hierarchy. – Yrb Apr 04 '22 at 12:21
  • That's because you are using 2 `NavigationView` [link](https://stackoverflow.com/questions/71540955/swiftui-handling-tab-navigation-inside-a-root-navigation-properly/71541449?noredirect=1#comment126459152_71541449) here's what you looking for – Guillermo Jiménez Apr 04 '22 at 15:28
  • @Yrb thanks, that solves the problem with the wrong positioning. However, it leads to the views not being shown at all before I switch back and forth between them. You can see what that looks like in the picture in the EDIT of my question – Simon Henn Apr 04 '22 at 21:22
  • You should not have `TabViews` inside of `TabViews`. A `TabView` is essentially a top of the hierarchy view. They do not nest. – Yrb Apr 04 '22 at 22:10
  • @Yrb Ok but how can I have scrollable pages then ? – Simon Henn Apr 05 '22 at 09:32
  • I am not sure I understand your comment. `TabViews` don't scroll. – Yrb Apr 05 '22 at 13:23
  • @Yrb I have a TabView with two tabs, Page 1 and Page 2. Each of those tabs are supposed to have multiple pages you can switch between (that's what I meant by "scrollable"). They are called "... Tab 1" and "... Tab 2". I don't see any other possibility of doing this without putting TabViews inside a TabView – Simon Henn Apr 05 '22 at 14:57
  • Other than use a `ScrollView`. You are going to have to rethink your design. Google carousel. – Yrb Apr 05 '22 at 15:25

0 Answers0