SwiftUI WKWebView 加载 HTML 字符串高度自适应 - 完整教程 - 常规

在 SwiftUI 中使用 WKWebView 加载 HTML 字符串并进行高度自适应的方法如下：\n\n1. 首先，你需要在你的 SwiftUI 视图中创建一个自定义的 UIViewRepresentable 类，用来表示 WKWebView。在该类中，你需要实现 makeUIView 和 updateUIView 两个方法。\n\nswift\nimport SwiftUI\nimport WebKit\n\nstruct WebView: UIViewRepresentable {\n let htmlString: String\n \n func makeUIView(context: Context) -> WKWebView {\n return WKWebView()\n }\n \n func updateUIView(_ uiView: WKWebView, context: Context) {\n uiView.loadHTMLString(htmlString, baseURL: nil)\n }\n}\n\n\n2. 接下来，在你的 SwiftUI 视图中使用该自定义的 WebView。\n\nswift\nstruct ContentView: View {\n let htmlString = \"\"\n <html>\n <head>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n <style>\n body {\n font-size: 16px;\n line-height: 1.2;\n padding: 16px;\n }\n </style>\n </head>\n <body>\n <h1>Hello, World!</h1>\n <p>This is a sample HTML string.</p>\n </body>\n </html>\n \"\"\n \n var body: some View {\n ScrollView {\n WebView(htmlString: htmlString)\n .frame(height: 1)\n .onPreferenceChange(WebViewHeightPreferenceKey.self) { height in\n // 更新 WebView 的高度\n }\n }\n }\n}\n\n\n3. 为了实现高度自适应，你可以使用一个 PreferenceKey 来获取 WebView 的内容高度，并将其传递给父视图。首先，创建一个 PreferenceKey 来保存 WebView 的高度。\n\nswift\nstruct WebViewHeightPreferenceKey: PreferenceKey {\n static var defaultValue: CGFloat = 0\n \n static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {\n value = nextValue()\n }\n}\n\n\n4. 在 WebView 中添加一个 WKNavigationDelegate 来获取 WebView 的内容高度，并将其传递给父视图。\n\nswift\nstruct WebView: UIViewRepresentable {\n let htmlString: String\n \n func makeUIView(context: Context) -> WKWebView {\n let webView = WKWebView()\n webView.navigationDelegate = context.coordinator\n return webView\n }\n \n func updateUIView(_ uiView: WKWebView, context: Context) {\n uiView.loadHTMLString(htmlString, baseURL: nil)\n }\n \n func makeCoordinator() -> Coordinator {\n Coordinator(self)\n }\n \n class Coordinator: NSObject, WKNavigationDelegate {\n var parent: WebView\n \n init(_ parent: WebView) {\n self.parent = parent\n }\n \n func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {\n webView.evaluateJavaScript(\"document.readyState\" ) { result, error in\n if let _ = result {\n webView.evaluateJavaScript(\"document.body.scrollHeight\" ) { result, error in\n if let height = result as? CGFloat {\n self.parent.height = height\n }\n }\n }\n }\n }\n }\n}\n\n\n5. 最后，使用 GeometryReader 和 PreferenceKey 来动态更新 WebView 的高度。\n\nswift\nstruct ContentView: View {\n @State private var webViewHeight: CGFloat = 0\n let htmlString = \"\"\n <html>\n <head>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n <style>\n body {\n font-size: 16px;\n line-height: 1.2;\n padding: 16px;\n }\n </style>\n </head>\n <body>\n <h1>Hello, World!</h1>\n <p>This is a sample HTML string.</p>\n </body>\n </html>\n \"\"\n \n var body: some View {\n GeometryReader { geometry in\n ScrollView {\n WebView(htmlString: htmlString)\n .frame(height: webViewHeight)\n .background(GeometryReader { webViewGeometry in\n Color.clear\n .preference(key: WebViewHeightPreferenceKey.self, value: webViewGeometry.size.height)\n })\n .onPreferenceChange(WebViewHeightPreferenceKey.self) { height in\n self.webViewHeight = height\n }\n }\n .frame(height: geometry.size.height)\n }\n }\n}\n\n\n这样，WebView 会根据内容的高度进行自适应，并且可以在父视图中进行滚动。