导航视图格式问题答案

【问题标题】：Navigation View Formatting Trouble导航视图格式问题
【发布时间】：2021-12-05 14:21:52
【问题描述】：

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

不幸的是，我遇到了格式问题，导致设置标签（齿轮图标）所在的 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 封装齿轮图标标签时发生的情况。注意它周围的垂直和水平空白。

   HStack(spacing: 25) {

      ... other labels

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

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

附言导航链接作为子窗口打开还有其他问题；我打算稍后解决这个问题。

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

   HStack(spacing: 25) {

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

很遗憾，没有实质性的变化……

【问题讨论】：

我们无法用所提供的信息真正回答您的问题。请参阅：How do I ask a good question? 和 How to create a Minimal, Reproducible Example。
很公平。我添加了代码来更好地解释
如果您绘制/填充该标签的背景（或在预览中单击它），可能更容易了解发生的情况，以便我们可以看到框架。另外，如果我需要一个让我在点击时触发动作的图像，我可能会使用一个按钮（它有内容和一个动作）而不是一个带有空文本的标签和一个 onTap。您改用标签的任何特殊原因？
其次，导航视图通常用于包装整个屏幕（或大部分屏幕）的内容，所以我怀疑你在这里得到什么，只包装单个标签/图标是一个奇怪的（微小的，不可见的）导航栏。同样，如果您在代码中四处单击，预览可见，您可能会看到围绕（微小）NavigationView 绘制的框架，然后在其中看到齿轮。我猜你可能想要一张工作表而不是 NavigationView？
how to present a sheet短教程

标签： swiftui swiftui-navigationview

【解决方案1】：

在诊断这类问题时，抛出带有颜色的.background() 会有所帮助。然后你就可以看到问题了。在这种情况下，它是双重的，一是您需要使用.fixedSize 将视图缩小到所需的最小尺寸。这会给你留下图标加上一点空间。这是因为您使用了标签，因为它为您用作填充的 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，则无需将其设置为“”。在您的示例中，没有标题，所以我只是将其删除并没有效果。

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

【讨论】：

感谢您的建议；不幸的是，问题仍然存在（我已经编辑了问题以显示发生了什么）
“视图层次结构中应该只有一个 NavigationView”。看来这是关键。我确实有一个 NavigationView，但它位于最低级别，就在 Settings 标签周围。一旦我将 NavigationView 作为顶级视图，HStack 对齐问题就消失了。现在我在顶部留下了过多的空间......但我应该能够弄清楚这一点。非常感谢。

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

【讨论】：