SwiftUI点击NavigationLink加载WebView触发主线程调用警告问题

问题现象 #

点击NavigationLink跳转到WebViewScreen时，触发警告：This method should not be called on the main thread as it may lead to UI unresponsiveness.，但单独展示WebViewScreen时无此警告。

问题原因 #

SwiftUI的NavigationLink（尤其在List容器中）会预加载目标视图，导致WebView的初始化和请求加载逻辑在主线程执行。虽然WKWebView的load(_:)是异步操作，但预加载时机下的主线程操作触发了系统的UI阻塞警告。

解决方案 #

方法一：延迟加载请求（兼容iOS 13+）

通过添加状态变量控制WebView的加载时机，直到视图真正显示后再发起网络请求：

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                NavigationLink("Apple") {
                    WebViewScreen(url: URL(string: "https://www.apple.com")!)
                }
            }
        }
    }
}

struct WebViewScreen: View {
    let url: URL
    @State private var isWebViewLoading = true
    @State private var shouldLoadWebView = false
    
    var body: some View {
        ZStack {
            WebViewRepresentable(
                isLoading: $isWebViewLoading,
                url: url,
                shouldLoad: $shouldLoadWebView
            )
            if isWebViewLoading {
                ProgressView()
                    .scaleEffect(1.5)
                    .tint(.accentColor)
            }
        }
        .onAppear {
            shouldLoadWebView = true
        }
    }
}

struct WebViewRepresentable: UIViewRepresentable {
    @Binding var isLoading: Bool
    let url: URL
    @Binding var shouldLoad: Bool
    
    func makeUIView(context: Context) -> WKWebView {
        let webView = WKWebView(frame: .zero)
        webView.navigationDelegate = context.coordinator
        return webView
    }

    func updateUIView(_ webView: WKWebView, context: Context) {
        if shouldLoad && webView.url == nil {
            let request = URLRequest(url: url)
            webView.load(request)
        }
    }

    func makeCoordinator() -> WebViewCoordinator {
        WebViewCoordinator(isLoading: $isLoading)
    }
}

class WebViewCoordinator: NSObject, WKNavigationDelegate {
    @Binding var isLoading: Bool

    init(isLoading: Binding<Bool>) {
        _isLoading = isLoading
    }

    func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
        isLoading = true
    }

    func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
        isLoading = false
    }
}

方法二：使用LazyNavigationLink（iOS 16+）

iOS 16及以上版本可使用LazyNavigationLink替代普通NavigationLink，它只会在用户点击跳转时才初始化目标视图，从根源避免预加载问题：

struct ContentView: View {
    var body: some View {
        NavigationStack {
            List {
                LazyNavigationLink("Apple") {
                    WebViewScreen(url: URL(string: "https://www.apple.com")!)
                }
            }
        }
    }
}

// WebViewScreen、WebViewRepresentable、WebViewCoordinator保持原代码不变

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