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

Question

我想将 TabView 放置在具有不同标题的 NavigationView 中，具体取决于所选选项卡。我想在这些选项卡内放置一个列表视图。请参阅下面的代码：

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

问题是，当页面第一次出现时，其 TabView 内的列表似乎放置得稍微太低，然后向上移动。您可以看到这一点，尤其是当您像这样切换选项卡时：

在选项卡之间来回切换后，它们会正确放置，直到我再次重新启动应用程序。非常感谢您的帮助！:)

编辑

按照建议，我尝试将导航视图放入 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 组件并继续实现相同的布局，直到揭示这种未知行为的根源，但我想这不是主意。