在 SwiftUI 中添加 .navigationTitle() 会向目标视图添加不需要的填充

Question

当我在 SwiftUI 中向父视图添加

.navigationTitle()

修饰符时，我注意到子视图的顶部添加了额外的填充。这似乎有点出乎意料，因为添加导航标题不会向子视图添加任何导航项：在这两种情况下，子视图中唯一的导航项是后退链接。

有没有办法可以避免子视图中的额外填充，同时仍然使用

.navigationTitle()

？

下面的示例演示了这种行为（如果您注释掉

.navigationTitle()

修饰符，您会注意到子视图上的顶部填充减少）。

家长观点：

struct ContentView: View {
  @State var navigationPath: [String] = []

  var body: some View {
    NavigationStack(path: $navigationPath) {
      VStack {
        Button(action: {navigationPath.append("View2")}){
          Text("Tap Me!")
            .font(.title)
        }
        .navigationDestination(for: String.self) { _ in
          SecondView()
        }
      }
      .navigationTitle("First View")
    }
  }
}

#Preview {
    ContentView()
}

儿童视图：

struct SecondView: View {
  var body: some View {
    VStack {
      Divider()
      Text("The Second View")
        .font(.title)
      Divider()
      Spacer()
    }
  }
}

#Preview {
  SecondView()
}

请注意，如果使用 NavigationView 和 NavigationLink 而不是 NavgiationStack，问题仍然存在。

Answer 1

添加自定义工具栏并检查其是否符合您的要求。

import SwiftUI

struct SecondView: View {

   @State var navigationPath: [String] = []

   var body: some View {
      NavigationStack(path: $navigationPath) {
         VStack {
             Button(action: { navigationPath.append("View2") }) {
                 Text("Tap Me!")
                     .font(.title)
             }
            .navigationDestination(for: String.self) { _ in
                SecondViewTemp()
            }
        }
        .toolbar {
            ToolbarItem(placement: .principal) {
                Text("First View")
                    .font(.headline)
                    .foregroundColor(.blue)
             }
         }
      }
  }
}

struct SecondViewTemp: View {
  var body: some View {
     VStack {
        Divider()
        Text("Second View Content")
            .font(.title)
        Divider()
        Spacer()
    }
    .toolbar {
        ToolbarItem(placement: .principal) {
            Text("Second View")
                .font(.headline)
        }
     }
   }
 }