SwiftUI iOS15中NavigationView嵌套TabView时无法隐藏导航栏的问题

你遇到的是iOS15之后NavigationView交互逻辑调整带来的典型问题——虽然通过自定义外观让导航栏视觉上透明了，但它的交互区域依然存在，会挡住下方视图的点击事件。iOS14里的.navigationBarHidden(true)在iOS15+的自定义导航栏场景下不再完全生效，这里给你两个可行的解决方案：

方案一：彻底隐藏导航栏（视觉+交互） #

在iOS15及以上版本，用.toolbar(.hidden, for: .navigationBar)替代旧的.navigationBarHidden(true)，这个修饰符会彻底移除导航栏的所有相关视图（包括交互区域），同时不影响你后续对导航栏外观的自定义需求。

示例代码结构：

NavigationView {
    VStack {
        CustomSearchView()
        TabView {
            // 你的Tab页面内容
            Text("Tab 1")
            Text("Tab 2")
        }
    }
    .toolbar(.hidden, for: .navigationBar) // 替换navigationBarHidden
    .onAppear {
        if #available(iOS 15.0, *) {
            iOS15UIBarSpecs()
        } else {
            // iOS14及以下保留原逻辑
            self.navigationBarHidden(true)
        }
    }
}

方案二：保留透明外观但禁用导航栏交互 #

如果你需要保留导航栏的视觉效果（比如半透明背景），只是不想让它拦截点击，可以在自定义导航栏外观的函数里添加禁用交互的设置：

修改你的iOS15UIBarSpecs函数：

@available(iOS 15.0, *) 
func iOS15UIBarSpecs(){ 
    let navBarAppearance = UINavigationBarAppearance() 
    navBarAppearance.configureWithTransparentBackground() 
    navBarAppearance.backgroundColor = UIColor.red.withAlphaComponent(0.5) 
    navBarAppearance.shadowImage = UIImage() 
    navBarAppearance.shadowColor = nil 
    UINavigationBar.appearance().standardAppearance = navBarAppearance 
    UINavigationBar.appearance().scrollEdgeAppearance = navBarAppearance 
    // 添加这行禁用导航栏交互
    UINavigationBar.appearance().isUserInteractionEnabled = false
}

注意：这是全局设置，如果你的App其他页面需要导航栏的交互功能，可能会受影响。如果要只针对当前导航栏设置，可以在onAppear里获取当前导航控制器单独修改：

.onAppear {
    if #available(iOS 15.0, *) {
        iOS15UIBarSpecs()
        // 仅禁用当前导航栏的交互
        if let navBar = UIApplication.shared.connectedScenes
            .compactMap({ $0 as? UIWindowScene })
            .first?.windows
            .first?.rootViewController?.navigationController?.navigationBar {
            navBar.isUserInteractionEnabled = false
        }
    }
}

原因说明 #

iOS15之后Apple重构了NavigationView和Toolbar的底层实现，旧的.navigationBarHidden(true)在自定义导航栏外观的场景下，只是隐藏了导航栏的视觉元素，但没有完全移除其底层的交互容器视图，导致它依然会拦截下方的点击事件。而.toolbar(.hidden, for: .navigationBar)则会彻底移除整个导航栏的视图层级，从根源解决点击拦截问题。

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