TabView Swift UI 中的 NavigationView答案

【问题标题】：NavigationView inside a TabView Swift UITabView Swift UI 中的 NavigationView
【发布时间】：2021-07-18 02:18:24
【问题描述】：

我刚刚在长时间休息后开始使用 SwiftUI，但我不明白为什么我不能在 Tab View 中放置 Navigation 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")
    }
}

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

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

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

我认为这是与this one 类似的问题，但那里没有代码。然后与this one 非常相似，但他们似乎直接将.tabItem 与ContentView 一起使用，就像我想与NavigationView 一样，但这不是构建！？

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

【问题讨论】：

标签： swift swiftui swift5 navigationview tabview

【解决方案1】：

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

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

在第二个示例中，您使用.tabItem 作为整个 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")
            }
            
        }
    }
}

【讨论】：

非常感谢 - 好的，我现在明白了，所以我很清楚。我们是说，通过在 NavigationView 的右大括号之后添加 .tabItem，它是 NavigationView 的修饰符吗？感谢您提供 Xcode 格式化提示，抱歉，我以后会这样做！
抱歉，您实际上已经在代码示例中注意到了这一点 - 再次感谢
是的，没错。与编辑没有尾随闭包的视图相同的概念，例如Text("Hello, world!").foregroundColor(.red)，其中修饰符位于它正在修改的View 之后。

【解决方案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")
              }

          }
      }
  }

【讨论】：