SwiftUI：NavigationView 内的 TabView 内的列表问题

Question

我想根据所选选项卡在带有不同标题的导航视图中放置一个TABVIEW。在这些选项卡中，我想放置一个列表视图。请参阅下面的代码：

 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()  
      }   
    }
 }

问题是，当页面首先出现时，其tabviews中的列表似乎略低，然后向上移动。您可以看到它，尤其是当您像这里这样切换选项卡时：

​非常感谢您的帮助！:)

编辑

我试图将NavigationViews放在TabView中。这解决了错误的定位。但是，在我之间来回切换之前，它根本没有显示出视图。您可以看到下图中的外观：

Answer 1

这是一个奇怪的问题，您可以根据您对即时更改列表样式的要求的要求采取不同的方法，使其消失了。

示例1：

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

另一个可能的解决方案是将填充添加到列表中：

示例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")
                    }
                }
                .padding(.top, 1)
                .tag("1")
                .navigationBarTitle("Page 1 Tab 1")
             
                List {
                    ForEach(0..<20){i in
                        Text("Test")
                    }
                }
                .padding(.top, 1)
                .tag("2")
                .navigationBarTitle("Page 1 Tab 2")
            }
            .tabViewStyle(.page(indexDisplayMode: .never))
            .ignoresSafeArea(.all)
            .background()
        }
     }
 }

作为最后的手段，您可以更改所使用的UI组件，然后继续实现相同布局直到揭示了这种未知行为的来源为止，但我想这不是想法。