SwiftUI：在 ScrollView 中显示 HTML 文本

Posted 2023-02-24

【中文标题】SwiftUI：在 ScrollView 中显示 HTML 文本

【英文标题】：SwiftUI: Showing HTML text inside a ScrollView

【发布时间】：2021-05-16 10:14:08

【问题描述】：

我正在尝试在我正在制作的应用程序中显示一些 html 文本，但我无法让它正常工作。 问题是包含文本的视图总是以只有一行的高度显示，即使它被包裹在 ScrollView 中。在截图中，你们可以看到 ScrollView 可以正常工作，但是原始尺寸非常小。

代码是：

ScrollView 
                GeometryReader  proxy in
                    AttributedText(htmlContent: job.description)
                        .frame(height: proxy.size.height, alignment: .center)
                
            

struct AttributedText: UIViewRepresentable 
    let htmlContent: String
    
    func makeUIView(context: Context) -> WKWebView 
        return WKWebView()
    
    
    func updateUIView(_ uiView: WKWebView, context: Context) 
        uiView.loadHTMLString(htmlContent, baseURL: nil)
    


struct AttributedText_Previews: PreviewProvider 
    static var previews: some View 
        AttributedText(htmlContent: "<h1>This is HTML String</h1>")
    

我也尝试使用 GeometryReader 来确定 ScrollView 的大小，但也没有运气。

有没有什么方法可以让这个看起来正常、美观、可滚动并具有适当的文本大小？

提前非常感谢！

编辑：在@RajaKishan 的回答之后，这就是它的样子（您可以看到内容被截断）：

【问题讨论】：

这是否回答了您的问题***.com/a/59790493/12299030？

谢谢！这是一个很好的来源，我会看看我是否可以从那个帖子中解决它，但现在，它没有帮助:(

【参考方案1】：

由于WKWebView 已经滚动并且您也被包裹在滚动视图中，因此父滚动视图的大小不合适。 您必须禁用 WKWebView 滚动。另外，将大小与 webview 绑定，并更新 webview 的框架。

这是可能的演示。

struct AttributedText: UIViewRepresentable 
    let htmlContent: String
    @Binding var size: CGSize
    
    private let webView = WKWebView()
    var sizeObserver: NSKeyValueObservation?
    
    func makeUIView(context: Context) -> WKWebView 
        webView.scrollView.isScrollEnabled = false //<-- Here
        webView.navigationDelegate = context.coordinator
        return webView
    
    
    func updateUIView(_ uiView: WKWebView, context: Context) 
        uiView.loadHTMLString(htmlContent, baseURL: nil)
    
    
    func makeCoordinator() -> Coordinator 
        Coordinator(parent: self)
    
    
    class Coordinator: NSObject, WKNavigationDelegate 
        let parent: AttributedText
        var sizeObserver: NSKeyValueObservation?
        
        init(parent: AttributedText) 
            self.parent = parent
            sizeObserver = parent.webView.scrollView.observe(\.contentSize, options: [.new], changeHandler:  (object, change) in
                parent.size = change.newValue ?? .zero
            )
        
    

供观赏

@State private var size: CGSize = .zero

var body: some View
    ScrollView 
        AttributedText(htmlContent: "<h1>This is HTML String</h1>", size: $size)
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, idealHeight: size.height, maxHeight: .infinity)
    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)

【讨论】：

不幸的是，它不起作用，因为现在它根本不滚动。所以现在我只看到一行没有任何机会滚动内容

谢谢！确实看起来好多了！但是如果内容占据的高度超过屏幕的高度，我仍然无法滚动。 @RajaKishan 我在原帖中添加了一个小视频，说明现在的情况

我检查了它会滚动整个内容。

它现在就像一个魅力！多谢！你是最棒的！