swift - 如何在 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 标签的字符串，它是从另一个 View 传递的。

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

我做错了什么？

Answer 1

WKWebView 中有一个 ScrollView ，并且您还将 HTMLStringView 包裹在 ScrollView 中，导致一些布局冲突。

选项:

1. 删除外部ScrollView:

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

传递明确的高度:

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

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