如何在 SwiftUI ScrollView 中显示 MathJax 字符串？答案

【问题标题】：How do I display a MathJax String in a SwiftUI ScrollView?如何在 SwiftUI ScrollView 中显示 MathJax 字符串？
【发布时间】：2021-04-09 07:07:37
【问题描述】：

我收到来自API 响应的MathJax String，该响应需要在SwiftUI 中的WKWebView 中显示。这是一个示例String

"<img alt=\"\" height=\"2305\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/infinitestudent-images\/ckeditor_assets\/pictures\/37732\/content_types_of_combustion.jpg\" width=\"800\" \/>"

这是我尝试过的代码：

import SwiftUI
import WebKit

struct Model: Codable {
    var mathjaxBody: String?
    var answer: Answer
}

struct MathJaxView: View {

    let model: Model

    var body: some View {
        ScrollView {
            AnswerSectionView(answer: model.answer)
            HTMLView(htmlString: model.mathjaxBody)
                .frame(minWidth: 100, maxWidth: .infinity, minHeight: 100, maxHeight: .infinity)
        }
    }
}

struct HTMLView: UIViewRepresentable {
    var htmlString: String?

    func makeUIView(context: Context) -> WKWebView {
        WKWebView(frame: .zero)
    }

    func updateUIView(_ uiView: WKWebView, context: Context) {
        guard let string = htmlString else { return }
        uiView.loadHTMLString(string, baseURL: nil)
    }
}

它需要在ScrollView 中，上面有一些不同的细节，这些细节在ScrollView 中正确显示。但是，HTMLView 没有出现。我尝试添加.frame(minWidth: 100, maxWidth: .infinity, minHeight: 100, maxHeight: .infinity) 但仍然没有出现。

【问题讨论】：

标签： swift swiftui scrollview wkwebview mathjax

【解决方案1】：

解决方案是通过evaluateJavaScript("document.body.scrollHeight") 方法简单地计算所需的高度，并通过其他一些方法将其应用于WebView 组件。

struct WebView: UIViewRepresentable {

    var htmlString: String?

    @EnvironmentObject var viewModel: WebViewModel

    func makeUIView(context: Context) -> WKWebView {
        let webView = WKWebView(frame: .zero)
        webView.backgroundColor = .clear
        webView.navigationDelegate = context.coordinator
        webView.scrollView.isScrollEnabled = false
        return webView
    }

    func updateUIView(_ uiView: WKWebView, context: Context) {
        guard let string = htmlString else { return }
        uiView.loadHTMLString(string, baseURL: nil)
    }

    class Coordinator: NSObject, WKNavigationDelegate {

        private var viewModel: WebViewModel

        init(viewModel: WebViewModel) {
            self.viewModel = viewModel
        }

        func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
            webView.evaluateJavaScript("document.readyState") { (complete, error) in
                if complete != nil {
                    webView.evaluateJavaScript("document.body.scrollHeight") { (height, error) in
                        if let height = height as? CGFloat, self.viewModel.contentHeight == 0 {
                            self.viewModel.contentHeight = height * 0.4
                        }
                    }
                }
            }
        }
    }

    func makeCoordinator() -> Coordinator {
        Coordinator(viewModel: viewModel)
    }
}

class WebViewModel: ObservableObject {
    @Published var contentHeight: CGFloat = 0
}

struct MathJaxView: View {

    let model: Model

    var body: some View {
        ScrollView {
            AnswerSectionView(answer: model.answer)
            WebView(htmlString: model.mathjaxBody)
                .environmentObject(webViewModel)
                .frame(height: webViewModel.contentHeight)
                .frame(maxWidth: .infinity)
                .fixedSize(horizontal: false, vertical: true)
        }
    }
}

【讨论】：