导航视图格式问题

Question

我是新手，使用 XCode 13.0 创建一个非常基本的应用程序，需要有一个设置视图。我想在点击标签时导航到“设置”视图。为此，使用带有 NavigationLink 的 NavigationView 似乎是明智的。

不幸的是，我遇到了一个格式问题，该问题导致设置标签（齿轮图标）所在的 HStack 变得一团糟，如下所示：

这就是我想要的，下面代码的结果：

      HStack(spacing: 25) {

        ... other labels

        Label ("", systemImage: "gear")
          .foregroundColor(.gray)
         .font(.title)
          .onTapGesture(perform: {
            // Set a state variable that triggers an extension
            //  that brings up the SettingsView
          })
      }

这是NavigationView封装齿轮图标标签时的效果。注意它周围的垂直和水平白色 space。

   HStack(spacing: 25) {

      ... other labels

      NavigationView {
             NavigationLink(destination: SettingsView()) {
               Label ("", systemImage: "gear")
                 .foregroundColor(.gray)
                 .font(.title)
             }.navigationBarTitle(Text(""))
          
      }
   }

从字面上看，我已经（偶尔）在这个问题上花费了数周时间，查找了数十个答案并尝试了各种格式选项，但没有成功。我也试过将父堆栈和祖父堆栈封装到 NavigationView 中。无济于事。当然，这是微不足道的事情。有人能指出我正确的方向吗？

p.s。还有其他问题在于导航 link 作为子 window 打开；我打算稍后再解决。

编辑：对，所以我尝试使用 Yrb 的代码：

   HStack(spacing: 25) {

      ... other labels    
    NavigationView {
        NavigationLink(destination: Text("Linked View")) {
            Image(systemName: "gear")
                .foregroundColor(.gray)
                .font(.title)
        }
        .fixedSize()
        .background(Color.red)
    }
  ]

遗憾的是，没有实质性的改变...

Answer 1

在诊断这类问题时，它有助于抛出一个带颜色的 .background()。然后就可以看到问题了。在这种情况下，它是双重的，第一，您需要使用 .fixedSize 将视图缩小到必要的最小尺寸。那会给你留下图标加上一点 space。那是因为你使用了一个标签，因为它为你用作填充的 Text("") 留下了一个位置。因为你只想要图像，所以使用 Image(systemName:) 然后代码如下所示：

struct NavLinkNoSpace: View {
    var body: some View {
        NavigationView {
            NavigationLink(destination: Text("Linked View")) {
                Image(systemName: "gear")
                    .foregroundColor(.gray)
                    .font(.title)
            }
            .fixedSize()
            
            // Setting this shows you what space you are using. Remove it when you are done
            .background(Color.red)
        }
    }
}

还有一些事情。如果您从未设置过 NavigationTitle，则无需将其设置为“”。在你的例子中，没有标题，所以我简单地删除了它，没有任何效果。

更重要的是，一些评论解决了这个问题，您应该在视图层次结构中只有一个 NavigationView。只要你在层次结构中，你就不需要包装像 NavigationLink 这样的东西来让它们工作。如果你在 child 视图中，你总是可以在预览提供程序中围绕你的视图调用抛出一个，以显示事物的样子，并测试 NavigationLinks 等，但不要只是把它们在你的主要代码中。会导致不良后果。

Answer 2

总结解决主要问题、格式化的方法：关键在于弄清楚什么将 封装在 NavigationView 中。我的错误是假设只有 NavigationLink 需要在 NavigationView 中。

有效的方法是将正文的所有内容放入 NavigationView，如下所示：

var body: some View {
 NavigationView {
  VStack(spacing: -10) {
    
    Text(appName)
      .font(.largeTitle)
      .foregroundColor(.blue)
      .padding(.bottom)

  // ...
  // includes a bunch of VStacks and HStacks
  // ... and finally 

        NavigationLink(destination: SettingsView()) {
          Image(systemName: "gear")
            .foregroundColor(.gray)
            .font(.title)

  // ... more stuff
  // ... and finally

 }.padding(.top, -100)   // NavigationView
} // body

导航视图格式问题

Navigation View Formatting Trouble

swiftui

swiftui-navigationview