TabView 内的 NavigationView Swift UI

Question

经过长时间的休息后，我刚刚开始学习 SwiftUI，但我不明白为什么我不能将 Navigation View 放在 Tab View 中。

我希望我的 Navigation View 成为一个 .tabItem，这样视图就会作为主要应用程序导航的一部分出现，所以我正在尝试这样做：

struct ContentView: View {
    var body: some View {
            TabView {
            
        NavigationView {
            
            .tabItem {
                Text("Home")
            }
                    
            Text("Tab bar test")
                .navigationBarTitle("Page One")
        }
}

这不适用于错误消息

Cannot infer contextual base in reference to member 'tabItem'

但是当我尝试这个时

    var body: some View {
        TabView {
        
    NavigationView {
                
        Text("Tab bar test")
            .navigationBarTitle("Page One")
    }
}
    .tabItem {
        Image(systemName: "1.circle")
        Text("Home")
    }
}

构建良好，但未显示标签栏。

我希望对其他人有用的主要问题是...

为什么我不能通过直接在 Navigation View 中嵌套 .tabItem 来制作一个 Navigation View 标签栏项目（按照我的第一个例子）？

我认为这是一个与 this one but there's no code there. And then quite similar to 类似的问题，但他们似乎正在使用 .tabItem 直接与 ContentView 就像我想与 NavigationView 一样，但事实并非如此建筑！？

我可能误解了一些简单的东西，但我现在完全不明白。

Answer 1

.tabItem 应该用作表示该选项卡的视图的修饰符。

在第一个示例中，由于语法错误，这不起作用——您试图在 NavigationView { 中的闭包打开时使用它，而您却想在外部使用它右括号的：NavigationView { }.tabItem(...)

在第二个示例中，您使用 .tabItem 作为修饰符 entire TabView 而不是 NavigationView。

如果您缩进代码以便您可以看到层次结构，那么您的两个示例可能已经更清楚地揭示了正在发生的事情。尝试在 Xcode 中选择您的代码并使用 Ctrl-I 获取 Xcode 为您正确格式化它。

这是一个工作版本：

struct ContentView : View {
    var body: some View {
        TabView {
            NavigationView {
                Text("Tab bar test")
                    .navigationBarTitle("Page One")
            }
            .tabItem { //note how this is modifying `NavigationView`
                Image(systemName: "1.circle")
                Text("Home")
            }
            
        }
    }
}

Answer 2

执行此操作以获得更好的概览：

内容视图：

struct ContentView : View {
        var body: some View {
            TabView {

            FirstView()
                .tabItem { 
                    Image(systemName: "folder.fill")
                    Text("Home")
                }

            SecondView()
                .tabItem { 
                    Image(systemName: "folder.fill")
                    Text("SecondView")
                }

                
            }
        }
    }

第一视角

struct FirstView: View {
                var body: some View {

                    NavigationView {
                            Text("FirstView")
                                .navigationBarTitle("Home")
                        }

                    }
                }
            }

第二视图

   struct SecondView: View {
      var body: some View {

          NavigationView {
                  Text("SecondView")
                      .navigationBarTitle("Home")
              }

          }
      }
  }

TabView 内的 NavigationView Swift UI

NavigationView inside a TabView Swift UI

swift

swiftui

swift5

navigationview

tabview

执行此操作以获得更好的概览：