时间戳

首页 > 解决方案 > SwiftUI：不要刷新自定义视图 MacOS 应用程序

ios - SwiftUI：不要刷新自定义视图 MacOS 应用程序

问题描述

您好我想创建一个具有多个 webview 的应用程序，一旦它们被加载一次，我不希望它们被重新创建我希望它们保留它们的实例。

我在我的应用程序中创建了一个导航视图，其中包含 10 个站点的列表。当我单击列表中的一项时，我想使用 NavigationLink 显示相应的 webview。有用。但问题是，如果我单击列表的另一个项目，我将返回到上一个它返回到主页，webview 再次加载。我希望 webview 只创建一次，并且只要应用程序还活着，它就一直保持活跃。我知道 swiftui 总是刷新视图是问题所在，如何防止我的 webview 被 swiftUI 刷新？

在 uitkit 中很简单，我在启动应用程序时创建了一个 wkwebview 数组，我在一个单例类中加载了我所有的 webview url。根据从我的 tableview 中选择的项目，我会显示相应的 wkwebview。即使我更改了项目，即使我们看不到它们，我的所有 webview 仍然存在。

struct WebView : UIViewRepresentable {

    let request: URLRequest

    func makeUIView(context: Context) -> WKWebView  {
        let web = WKWebView()
        web.load(request)
        return web
    }

    func updateUIView(_ uiView: WKWebView, context: Context) {

    }

}

标签： iosswiftmacosswiftui

解决方案

这是可能方法的简化演示。这个想法是通过一些标识符缓存创建的 WKWebView 对象，并在创建的（或重新创建的）可表示的瘦包装器 SwiftUI 视图中重用它们。

经过测试并与 Xcode 11.2 / iOS 13.2 一起使用

struct WebView: UIViewRepresentable {

    private static var cache: [Int: WKWebView] = [:]

    // the only allowed entry point to create WebView, so have control either
    // to create new instance of WKWebView or provide already loaded
    static func view(with id: Int, request: URLRequest) -> WebView {
        var web = cache[id] // it is UI thread so safe to access static
        if web == nil {
            web = WKWebView()
            cache[id] = web
        }
        return WebView(with: web!, request: request)
    }

    private init(with web: WKWebView, request: URLRequest) {
        self.web = web
        self.request = request
    }

    private let web: WKWebView
    private let request: URLRequest

    func makeUIView(context: Context) -> WKWebView  {
        if web.url == nil { // just created, so perform initial loading
            web.load(request)
        }
        return web
    }

    func updateUIView(_ uiView: WKWebView, context: Context) {
    }
}

// Just simple test view
struct TestOnceLoadedWebView: View {
    private let urls: [String] = [
        "http://www.apple.com",
        "http://www.google.com",
        "http://www.amazon.com"
    ]

    var body: some View {
        NavigationView {
            List(0 ..< urls.count) { i in
                NavigationLink("Link \(i)", destination:
                    WebView.view(with: i, request: 
                                 URLRequest(url: URL(string: self.urls[i])!)))
            }
        }
    }
}

推荐阅读