如何在swiftUI中以线性风格ProgressView显示WKWebView的estimatedProgress？

Question

我尝试在这个问题上搜索数周，但找不到 SwiftUI 中实现的任何帮助。大多数答案都是针对 UIKit 的。

struct ContentView: View {
    @State private var progress: Double = 0.0
    
    var body: some View {
        VStack {
            WebView()

            ProgressView(value: progress)
                .progressViewStyle(.linear)
        }
    }
}

struct WebView: UIViewRepresentable {
    func makeUIView(context: Context) -> WKWebView {
        let webView = WKWebView()
        webView.load(URLRequest(url: URL(string: "https://www.apple.com")!))
        return webView
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) {
        
    }
}

Answer 1

因为您正在使用UIViewRepresentable包装，所以WKWebView您需要使用UIKit解决方案。

我们可以跟踪使用键值观察（KVO）的估计进度。WKWebView为此，我们需要向我们的WebView.

仅仅添加协调器是不够的，我们需要一种方法将值从 传递UIViewRepresentable回View。我们可以使用 a@Binding或 闭包来做到这一点，但这会在视图更新时导致以下错误：

警告：在视图更新期间修改状态，这将导致未定义的行为。

progress一个“hacky”解决方案是使用以下方法包装绑定变量的设置DispatchQueue.main.async，但这不是一个好的解决方案。

解决此问题的更好方法是创建一个符合ObservableObject.

这给出了以下代码：

struct ContentView: View {
    @StateObject var viewModel = WebView.ProgressViewModel(progress: 0.0)

    var body: some View {
        VStack {
            WebView(url: URL(string: "https://www.apple.com")!, viewModel: viewModel)

            ProgressView(value: viewModel.progress)
                .progressViewStyle(.linear)
        }
    }
}

nowContentView保存对ProgressViewModelthis 的引用，与 URL 一起传递给WebView. 已ProgressView通过@Published的进度ProgressViewModel。

struct WebView: UIViewRepresentable {

    let url: URL
    @ObservedObject var viewModel: ProgressViewModel

    private let webView = WKWebView()

    func makeUIView(context: Context) -> WKWebView {
        webView.load(URLRequest(url: url))
        return webView
    }

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

    }
}

UIViewRepresentable除了我们传递的是 和URL之外，这和你的没有太大区别ProgressViewModel。我们还将 webView 的初始化从 中提出makeUIView，这样我们就可以在 中访问它Coordinator。

extension WebView {

    func makeCoordinator() -> Coordinator {
        Coordinator(self, viewModel: viewModel)
    }

    class Coordinator: NSObject {
        private var parent: WebView
        private var viewModel: ProgressViewModel
        private var observer: NSKeyValueObservation?

        init(_ parent: WebView, viewModel: ProgressViewModel) {
            self.parent = parent
            self.viewModel = viewModel
            super.init()

            observer = self.parent.webView.observe(\.estimatedProgress) { [weak self] webView, _ in
                guard let self = self else { return }
                self.parent.viewModel.progress = webView.estimatedProgress
            }
        }

        deinit {
            observer = nil
        }
    }
}

此扩展WebView创建了协调器，它继承自NSObject. 它保存对父级、WebView和 viewModel 的引用。我们在初始化程序中设置了一个 KVO 观察器，观察estimatedProgresswebView 上的情况，这使我们能够更新 viewModel 上的进度值。

extension WebView {
    class ProgressViewModel: ObservableObject {
        @Published var progress: Double = 0.0

        init (progress: Double) {
            self.progress = progress
        }
    }
}

最后，这就是ProgressViewModel将 theUIViewRepresentable和 the联系View在一起的 。

你可以在这里观看它的视频