SwiftUI NavigationLink跳转详情页顶部灰色区域无法隐藏问题

开发过程中通过NavigationLink跳转至详情页detailView，初始展示效果如下：

目标交互逻辑：

• 用户触发点击手势时，隐藏导航返回按钮
• 用户触发下滑拖拽手势时，恢复导航返回按钮显示

目前交互逻辑已调试完成，但存在异常：页面顶部灰色区域始终无法隐藏，即使调用.ignoresSafeArea、.navigationBarHidden修饰符，灰色区域依然存在，异常效果如下：

核心疑问：ignoresSafeArea修饰符是否对NavigationLink跳转调出的视图生效？需要对应的问题解决思路。

var body : some View{
  ZStack {
        TextEditor(text: $newNote)
       .ignoresSafeArea()
  }
  .navigationBarHidden(true)
  .onTapGesture {
            self.navigationBarBackButtonHidden = true
            self.navigationBarHidden = true
  }
  .gesture(DragGesture(minimumDistance: 20, coordinateSpace: .global)
            .onEnded({ value in
                if value.translation.width < 0 {
                    // 左滑逻辑
                }
                
                if value.translation.width > 0 {
                    hideKeyboard()
                    self.navigationBarBackButtonHidden = false
                    self.navigationBarHidden = false
                }
                if value.translation.height < 0 {
                    // 上滑逻辑
                }
                
                if value.translation.height > 0 {
                    hideKeyboard()
                    self.navigationBarBackButtonHidden = false
                    self.navigationBarHidden = false
                }
            })
  )
  .onAppear{ 
      // 原代码此处写法错误，修饰符不能写在onAppear闭包内
      .navigationBarHidden(navigationBarHidden)
      .navigationBarBackButtonHidden(navigationBarBackButtonHidden)
  }
}

ignoresSafeArea对NavigationLink跳转的视图完全生效，顶部灰色区域无法消除是代码写法错误、API使用不当导致的，具体原因和修复方案如下：

• 语法错误：.navigationBarHidden、.navigationBarBackButtonHidden是视图链式调用的修饰符，不能写在.onAppear闭包内部，这类修饰符需要直接绑定状态变量挂载在根视图上，状态变更时SwiftUI会自动刷新UI，无需在生命周期回调里手动触发。
• 旧API兼容问题：已废弃的.navigationBarHidden(true)在iOS 16及以上系统存在缺陷，隐藏导航栏后会在原导航栏位置留下空白占位，也就是看到的灰色区域，需要替换为新API.toolbar(_:for:)控制导航栏显隐。
• 修饰符位置错误：ignoresSafeArea仅添加在TextEditor上无法覆盖整个页面的安全区域占位，需要挂载在最外层根视图上，明确指定忽略顶部安全区域。
• 手势冲突：直接使用.gesture添加点击、拖拽手势会阻塞TextEditor原生的输入、滚动交互，需要替换为.simultaneousGesture保证自定义手势和系统手势同时识别，不影响输入框正常使用。

修复后的可运行代码参考：

@State private var navigationBarBackButtonHidden = false
@State private var navigationBarHidden = false

var body: some View {
    ZStack {
        TextEditor(text: $newNote)
    }
    // 直接绑定状态控制返回按钮显隐
    .navigationBarBackButtonHidden(navigationBarBackButtonHidden)
    // 使用新API控制导航栏显隐，避免顶部留白
    .toolbar(navigationBarHidden ? .hidden : .visible, for: .navigationBar)
    // 根视图忽略顶部安全区域
    .ignoresSafeArea(edges: .top)
    // 用同时识别手势避免阻塞输入框原生交互
    .simultaneousGesture(
        TapGesture()
            .onEnded {
                navigationBarBackButtonHidden = true
                navigationBarHidden = true
            }
    )
    .simultaneousGesture(
        DragGesture(minimumDistance: 20, coordinateSpace: .global)
            .onEnded { value in
                // 右滑、下滑时恢复导航栏
                if value.translation.width > 0 || value.translation.height > 0 {
                    hideKeyboard()
                    navigationBarBackButtonHidden = false
                    navigationBarHidden = false
                }
            }
    )
}

内容的提问来源于stack exchange，提问作者alex