iPhone 14 Pro/Pro Max状态栏与WebView间白线问题求助

问题根源 #

这条白线是iPhone 14 Pro系列的**灵动岛（Dynamic Island）**区域导致的状态栏高度计算偏差：你手动添加的statusbarView用固定高度适配普通刘海机，但没覆盖灵动岛下方的额外区域，WebView又未完全顶到状态栏底部，因此出现缝隙。

修复方案 #

无需针对特定机型做判断，只需调整状态栏视图约束适配全机型安全区域，同时确保WebView完全填充父视图，即可无缝解决问题。

1. 修改UINavigationController扩展的状态栏视图约束

替换原固定高度的约束，让状态栏视图自动贴合安全区域顶部与导航栏顶部，覆盖所有机型的状态栏区域：

extension UINavigationController {
    override open func viewDidLoad() {
        super.viewDidLoad()
        let statusbarView = UIView()
        statusbarView.backgroundColor = UIColor(red: 125.0/255.0, green: 102.0/255.0, blue: 159.0/255.0, alpha: 1.0)
        view.addSubview(statusbarView)
        statusbarView.translatesAutoresizingMaskIntoConstraints = false
        
        // 适配全机型的约束
        NSLayoutConstraint.activate([
            statusbarView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            statusbarView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            statusbarView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            statusbarView.bottomAnchor.constraint(equalTo: navigationBar.topAnchor)
        ])
        
        let appearanceNav = UINavigationBarAppearance()
        appearanceNav.backgroundColor = UIColor(red: 125.0/255.0, green: 102.0/255.0, blue: 159.0/255.0, alpha: 1.0)
        appearanceNav.largeTitleTextAttributes.updateValue(UIColor.white, forKey: NSAttributedString.Key.foregroundColor)
        appearanceNav.titleTextAttributes.updateValue(UIColor.white, forKey: NSAttributedString.Key.foregroundColor)
        appearanceNav.shadowColor = nil
        navigationBar.standardAppearance = appearanceNav
        navigationBar.compactAppearance = appearanceNav
        navigationBar.scrollEdgeAppearance = appearanceNav
        navigationBar.tintColor = UIColor.white
    }
}

2. 确保WebView完全填充父视图

修改WebView结构体，让WKWebView自动填充可用空间，避免出现缝隙：

struct WebView: UIViewRepresentable {
    let url: URL
    
    func makeUIView(context: Context) -> WKWebView {
        let webView = WKWebView()
        webView.translatesAutoresizingMaskIntoConstraints = false
        webView.load(URLRequest(url: url))
        return webView
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) {}
}

// 扩展让WebView在SwiftUI中自动填充
extension WebView {
    func fillParent() -> some View {
        self.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
    }
}

然后在SearchView中调用该扩展：

struct SearchView: View {
    let sysLanguage = NSLocale.current.languageCode
    
    var body: some View {
        WebView(url: URL(string: "https://www.vivibusso.app/webapp_test/it/search.html")!)
            .fillParent()
            .navigationBarHidden(true)
    }
}

方案优势 #

• 用safeAreaLayoutGuide替代固定高度，自动适配包括灵动岛在内的所有机型状态栏区域
• 状态栏视图直接衔接导航栏顶部，完全覆盖状态栏无死角
• WebView设置为填充父视图，与状态栏视图无缝衔接，不会出现缝隙

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