NavigationView inside a TabView Swift UI

Question

我只是在长时间休息后拿起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成为选项卡栏项(根据我的第一个示例(？

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

我可能误解了一些简单的事情，但我现在根本不明白。

Answer 1

这样做可以获得更好的概述：

内容视图：

struct ContentView : View {
var body: some View {
TabView {
FirstView()
.tabItem { 
Image(systemName: "folder.fill")
Text("Home")
}
SecondView()
.tabItem { 
Image(systemName: "folder.fill")
Text("SecondView")
}

}
}
}

• FirstView

  struct FirstView: View {
  var body: some View {
  NavigationView {
  Text("FirstView")
  .navigationBarTitle("Home")
  }
  }
  }
  }
  

• SecondView

  struct SecondView: View {
  var body: some View {
  NavigationView {
  Text("SecondView")
  .navigationBarTitle("Home")
  }
  }
  }
  }
  

Answer 2

.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")
}

}
}
}