SwiftUI WKWebView 自适应高度实现 - 详细指南与代码示例

要使 WKWebView 自适应高度，您需要使用 GeometryReader 和 WebView 的委托方法来测量内容的高度，并相应地更新 WebView 的高度。下面是一个示例代码：\n\nswift\nimport SwiftUI\nimport WebKit\n\nstruct ContentView: View {\n @State private var webViewHeight: CGFloat = .zero\n \n var body: some View {\n VStack {\n GeometryReader { geometry in\n WebView(htmlString: "<p>Your HTML content</p>", webViewHeight: self.$webViewHeight)\n .frame(height: self.webViewHeight)\n .onPreferenceChange(WebViewHeightPreferenceKey.self) { preferences in\n self.webViewHeight = preferences.height\n }\n }\n }\n }\n}\n\nstruct WebView: UIViewRepresentable {\n let htmlString: String\n @Binding var webViewHeight: CGFloat\n\n func makeUIView(context: Context) -> WKWebView {\n let webView = WKWebView()\n webView.navigationDelegate = context.coordinator\n return webView\n }\n\n func updateUIView(_ webView: WKWebView, context: Context) {\n webView.loadHTMLString(htmlString, baseURL: nil)\n }\n \n func makeCoordinator() -> Coordinator {\n Coordinator(self)\n }\n \n class Coordinator: NSObject, WKNavigationDelegate {\n let webView: WebView\n \n init(_ webView: WebView) {\n self.webView = webView\n }\n \n func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {\n webView.evaluateJavaScript("document.readyState", completionHandler: { (complete, error) in\n if complete != nil {\n webView.evaluateJavaScript("document.documentElement.scrollHeight", completionHandler: { (height, error) in\n guard let height = height as? CGFloat else { return }\n self.webView.webViewHeight = height\n })\n }\n })\n }\n }\n}\n\nstruct WebViewHeightPreferenceKey: PreferenceKey {\n static var defaultValue: WebViewHeightPreferences = .zero\n \n static func reduce(value: inout WebViewHeightPreferences, nextValue: () -> WebViewHeightPreferences) {\n value = nextValue()\n }\n \n typealias Value = WebViewHeightPreferences\n}\n\nstruct WebViewHeightPreferences: Equatable {\n let height: CGFloat\n}\n\nextension View {\n func webViewHeightPreference() -> some View {\n self.background(GeometryReader { geometry in\n Color.clear.preference(key: WebViewHeightPreferenceKey.self, value: WebViewHeightPreferences(height: geometry.size.height))\n })\n }\n}\n\n\n在这个示例中，WebView 是一个 UIViewRepresentable，它使用 WKWebView 来显示 HTML 内容。WebView 的高度通过更新 webViewHeight 属性来自动调整。当 WebView 加载完成后，它会使用 JavaScript 来获取内容的高度，并将其更新到 webViewHeight 属性。\n\n在 ContentView 中，使用 GeometryReader 包装 WebView，并将 WebView 的高度设置为 webViewHeight。当 WebView 的高度发生变化时，通过使用 onPreferenceChange 来更新 webViewHeight。这里使用了一个自定义的 PreferenceKey WebViewHeightPreferenceKey 来存储 WebView 的高度。\n\n最后，通过在 WebView 的外部视图上使用 webViewHeightPreference 修饰符来获取 WebView 的高度，并将其存储到 WebViewHeightPreferenceKey 中。