在 macOS 上使用 SwiftUI 实现 WebKit（并创建网页预览）。

Question

我正在尝试创建一个菜单栏应用程序，它显示该网站的收件箱。我想要创建一个简单的函数，打开一个小弹窗，显示项目的URL（而不是打开Safari）。一个收件箱项目看起来像这样。

struct InboxItem: View {
    @State var MesgSite: String = "https://duckduckgo.com"
    @State private var showSafari = false    
   
    var body: some View {
        VStack(alignment: .leading) {
            Text("some text")
        .background(SelectColor.opacity(0.5))
        .onLongPressGesture {
           //show preview of the MesgSite here
            self.SelectColor = .blue
            self.showSafari.toggle()
        }.popover(isPresented: self.$showSafari) {
            SafariPreview()
        }
    }
}

struct SafariPreview: View {

    var body: some View {
        VStack {
            Text("Display the webpage here")
            .padding()
        }.frame(maxWidth: 533, maxHeight: 300)
    }

}

当长按项目时，我希望能够像macOS上默认的邮件应用程序一样预览关联网页，如下所示： 我尝试通过在NSViewRepresentable中添加wkwebview和SafariView来实现，但是我得到了类似以下错误的错误消息，该错误消息使用此SO post中的代码：

“使用未声明的类型'UIViewRepresentable'”

TIA！

编辑：

您可以在这里的github上找到项目的最基本版本。

编辑2：

更加关注问题。

- Chiel

Answer 1

我也试图想出一个解决方案。既然我在网上找不到任何相关文档，那么下面我将提供我通过试错找到的解决方案。

首先，UI... 在 macOS 上有对应的称呼，叫做 NS...。因此，在 macOS 上，UIViewRepresentable 就应该改为 NSViewRepresentable。接下来，我发现 这个 SO 问题 提供了一个在 macOS 上使用 WKWebView 的示例代码。结合另一个 SO 问题的答案，我可以检测到 URL 的变化，并且知道什么时候视图加载完成。

macOS 上的 SwiftUI WebView

以下是结果代码。为了清晰起见，我建议将其放在一个名为 WebView.swift 的不同文件中：

首先导入所需的包：

import SwiftUI
import WebKit
import Combine

然后创建一个模型，用于保存您想在SwiftUI视图中访问的数据：

class WebViewModel: ObservableObject {
    @Published var link: String
    @Published var didFinishLoading: Bool = false
    @Published var pageTitle: String
    
    init (link: String) {
        self.link = link
        self.pageTitle = ""
    }
}

最后，使用NSViewRepresentable创建struct，它将成为WebView()的HostingViewController：

struct SwiftUIWebView: NSViewRepresentable {
    
    public typealias NSViewType = WKWebView
    @ObservedObject var viewModel: WebViewModel

    private let webView: WKWebView = WKWebView()
    public func makeNSView(context: NSViewRepresentableContext<SwiftUIWebView>) -> WKWebView {
        webView.navigationDelegate = context.coordinator
        webView.uiDelegate = context.coordinator as? WKUIDelegate
        webView.load(URLRequest(url: URL(string: viewModel.link)!))
        return webView
    }

    public func updateNSView(_ nsView: WKWebView, context: NSViewRepresentableContext<SwiftUIWebView>) { }

    public func makeCoordinator() -> Coordinator {
        return Coordinator(viewModel)
    }
    
    class Coordinator: NSObject, WKNavigationDelegate {
        private var viewModel: WebViewModel

        init(_ viewModel: WebViewModel) {
           //Initialise the WebViewModel
           self.viewModel = viewModel
        }
        
        public func webView(_: WKWebView, didFail: WKNavigation!, withError: Error) { }

        public func webView(_: WKWebView, didFailProvisionalNavigation: WKNavigation!, withError: Error) { }

        //After the webpage is loaded, assign the data in WebViewModel class
        public func webView(_ web: WKWebView, didFinish: WKNavigation!) {
            self.viewModel.pageTitle = web.title!
            self.viewModel.link = web.url?.absoluteString as! String
            self.viewModel.didFinishLoading = true
        }

        public func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) { }

        public func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
            decisionHandler(.allow)
        }

    }

}

这段代码可以按以下方式使用：

struct ContentView: View {
    var body: some View {
        //Pass the url to the SafariWebView struct.
        SafariWebView(mesgURL: "https://stackoverflow.com/")
    }
}
struct SafariWebView: View {
    @ObservedObject var model: WebViewModel

    init(mesgURL: String) {
        //Assign the url to the model and initialise the model
        self.model = WebViewModel(link: mesgURL)
    }
    
    var body: some View {
        //Create the WebView with the model
        SwiftUIWebView(viewModel: model)
    }
}

创建一个Safari预览

现在我们有了这个知识，重新创建实用的Safari预览相对容易。

为了实现这一点，在调用预览的视图中添加 @State private var showSafari = false（当您想要显示预览时将切换状态）。

还要添加 .popover(isPresented: self.$showSafari) { ... 来显示预览。

struct ContentView: View {
    @State private var showSafari = false

    var body: some View {
        VStack(alignment: .leading) {
            Text("Press me to get a preview")
            .padding()
        }
        .onLongPressGesture {
            //Toggle to showSafari preview
            self.showSafari.toggle()
        }//if showSafari is true, create a popover
        .popover(isPresented: self.$showSafari) {
            //The view inside the popover is made of the SafariPreview
            SafariPreview(mesgURL: "https://duckduckgo.com/")
        }
    }
}

现在SafariPreview结构体将会像这样：

struct SafariPreview: View {
    @ObservedObject var model: WebViewModel
    init(mesgURL: String) {
        self.model = WebViewModel(link: mesgURL)
    }
    
    var body: some View {
        //Create a VStack that contains the buttons in a preview as well a the webpage itself
        VStack {
            HStack(alignment: .center) {
                Spacer()
                Spacer()
                //The title of the webpage
                Text(self.model.didFinishLoading ? self.model.pageTitle : "")
                Spacer()
                //The "Open with Safari" button on the top right side of the preview
                Button(action: {
                    if let url = URL(string: self.model.link) {
                        NSWorkspace.shared.open(url)
                    }
                }) {
                    Text("Open with Safari")
                }
            }
            //The webpage itself
            SwiftUIWebView(viewModel: model)
        }.frame(width: 800, height: 450, alignment: .bottom)
            .padding(5.0)
    }
}

结果看起来像这样：

- Chiel

Answer 2

Chiel的答案很棒！

但是，可能有人正在寻找没有完整浏览器功能的HTML渲染器视图。

适用于MacOS。

import SwiftUI
import WebKit

struct WebView: View {
    @Binding var html: String
    
    var body: some View {
        WebViewWrapper(html: html)
    }
}

struct WebViewWrapper: NSViewRepresentable {
    let html: String
    
    func makeNSView(context: Context) -> WKWebView {
        return WKWebView()
    }
    
    func updateNSView(_ nsView: WKWebView, context: Context) {
        nsView.loadHTMLString(html, baseURL: nil)
    }
}

使用方法：

@State var text = "<html><body><h1>Hello World</h1><p><strong>hell</strong> yeah!</p></body></html>"
//......

TextField("", text: $text)
        
Divider()

WebView(html: $text)
    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)

- Andrew___Pls_Support_UA