如何在 SwiftUI 中渲染 HTML 字符串？

Question

我需要在我的 swiftui 应用程序中渲染 html 字符串。

我发现这个： How to show HTML or Markdown in a SwiftUI Text?

但我尝试了那里的每一个解决方案，但我得到的是空白屏幕！

这是我的代码：

import SwiftUI
import WebKit


struct HTMLStringView: UIViewRepresentable {
    let htmlContent: String

    func makeUIView(context: Context) -> WKWebView {
        return WKWebView()
    }

    func updateUIView(_ uiView: WKWebView, context: Context) {
        uiView.loadHTMLString(htmlContent, baseURL: nil)
    }
}


struct audioInfoView: View {
    
    let longDetails: String

    
    var body : some View{
        
        ScrollView{
            
            ZStack{
                
                HTMLStringView(htmlContent: "<p>\(longDetails)</p>")
                
                //Text(longDetails)
             
                
            }.padding()
        }.padding(.top,50)
        
    }
}

这let longDetails: String是一个带有 html 标签的字符串，它是从另一个视图传递的。

如果我这样做Text(longDetails)，我可以看到文本和所有 html 标签，但是当我这样做时 HTMLStringView(htmlContent: "<p>\(longDetails)</p>")，我什么也看不到，它只显示一个空白屏幕！

我究竟做错了什么？

Answer 1

WKWebView其中有一个滚动视图，并且您也有一个HTMLStringView包裹在 a 中ScrollView，导致一些布局冲突。

选项：

1. 去掉外层ScrollView：

var body : some View{
        HTMLStringView(htmlContent: "<p>\(longDetails)</p>")
    }

2. 传递明确的高度：

var body : some View{
    ScrollView{
        ZStack{
            HTMLStringView(htmlContent: "<p>\(longDetails)</p>")
                .frame(height: 200)
        }.padding()
    }.padding(.top,50)
}

您的选择可能会根据您的用例而有所不同。如果您不希望滚动，您可能还想探索.isScrollEnabled。而且，似乎您最终可能还会遇到需要查找内容高度的情况：How to certain the content size of a WKWebView?WKWebViewWKWebViewWKWebView