在SwiftUI中观察WKWebView的加载进度可以通过使用WebKit的WKWebView的代理方法来实现。下面是一个完整的示例代码:
首先,创建一个名为WebViewObserver的ObservableObject类,用于观察WKWebView的加载进度:
import SwiftUI
import WebKit
class WebViewObserver: NSObject, ObservableObject, WKNavigationDelegate {
@Published var loadingProgress: Double = 0.0
func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
// 页面开始加载时调用
loadingProgress = 0.0
}
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
// 页面加载完成时调用
loadingProgress = 1.0
}
func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
// 页面加载失败时调用
loadingProgress = 0.0
}
func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: Error) {
// 页面加载失败时调用(包括网络问题)
loadingProgress = 0.0
}
func webView(_ webView: WKWebView, didReceiveServerRedirectForProvisionalNavigation navigation: WKNavigation!) {
// 页面重定向时调用
loadingProgress = 0.5
}
func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
// 页面开始加载时调用(包括重定向)
loadingProgress = 0.1
}
}
然后,在你的视图中使用WKWebView并观察加载进度:
import SwiftUI
import WebKit
struct ContentView: View {
@StateObject private var webViewObserver = WebViewObserver()
var body: some View {
VStack {
Text("Loading Progress: \(webViewObserver.loadingProgress * 100, specifier: "%.0f")%")
WebView()
.navigationDelegate(webViewObserver)
}
}
}
struct WebView: UIViewRepresentable {
func makeUIView(context: Context) -> WKWebView {
let webView = WKWebView()
return webView
}
func updateUIView(_ uiView: WKWebView, context: Context) {
let url = URL(string: "https://www.example.com")!
let request = URLRequest(url: url)
uiView.load(request)
}
}
在上面的示例中,我们创建了一个名为WebViewObserver的ObservableObject类,它实现了WKNavigationDelegate协议,并使用@Published属性包装器来观察加载进度。在WebView中,我们使用了UIKit的UIViewRepresentable协议来创建并更新WKWebView,并将WebViewObserver设置为WKWebView的导航代理。
最后,在ContentView中,我们使用StateObject属性包装器来创建WebViewObserver的实例,并在视图中显示加载进度。
这样,当WKWebView加载页面时,WebViewObserver会根据加载进度的变化自动更新loadingProgress属性,从而实现在SwiftUI中观察WKWebView的加载进度。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云