如何在 SwiftUI 中为 WKWebView 创建浏览器选项卡

Question

我正在尝试构建一个新的选项卡功能，但我不太确定如何实现这一点。我在设置新的或以前的 WKWebView 时遇到问题。如果 url 无效，我如何显示 errorView？

这是我目前所拥有的。

编辑：我不太确定如何初始化或如何创建无效 URL 视图。这有点像我的想法

class NavigationState : NSObject, ObservableObject {
    @Published var url : URL?
    let webView = WKWebView()
}

extension NavigationState : WKNavigationDelegate {
    func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
        self.url = webView.url
    }
}

struct WebView : UIViewRepresentable {
    
    let request: URLRequest
    var navigationState : NavigationState
    
    func makeUIView(context: Context) -> WKWebView  {
        let webView = navigationState.webView
        webView.navigationDelegate = navigationState
        webView.load(request)
        return webView
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) { }
}

struct ContentView: View {
    @StateObject var navigationState = NavigationState()
    @State var tablist = [NavigationState]
    @State var validurl = true;

    init(){
      //does not work currently
      navigationState.createNewWebView(withRequest: URLRequest(url: URL(string: "https://www.google.com")!))
    }
    
    var body: some View {
        VStack(){
            Button("create new tab"){
               tablist.append(navigationState)
               //create and set new webview
            }
            Text(navigationState.url?.absoluteString ?? "(none)")
           if(validUrl){
            WebView(request: URLRequest(url: URL(string: "https://www.google.com")!), navigationState: navigationState)
            } else{InvalidURL()}
            HStack {
                Button("Back") {
                    navigationState.webView.goBack()
                }
                Button("Forward") {
                    navigationState.webView.goForward()
                }
              TextField(){onCommit: {    
                navigationState.selectedWebView?.load(URLRequest(url: URL(string: urlInput)!))
             }}
            }
        }
         List {
                ForEach(tabs, id: \.self) { tab in
                    Button(action: {
                        //set to current webview
                    }, label: {
                        Text(tab.webView.url)
                    })
                }.onDelete(perform: delete)
            }
    }
}

编辑初始化

我在 NavigationState 下添加了这段代码，但一直出现空白屏幕。

override init(){
        super.init()
        let wv = WKWebView()
        wv.navigationDelegate = self
        self.webViews.append(wv)
        self.selectedWebView = wv
        wv.load(URLRequest(url: URL(string: "https://www.google.com")!))
    }

Answer 1

下面是一个比较简单的实现（先代码，后解释）：

class NavigationState : NSObject, ObservableObject {
    @Published var currentURL : URL?
    @Published var webViews : [WKWebView] = []
    @Published var selectedWebView : WKWebView?
    
    @discardableResult func createNewWebView(withRequest request: URLRequest) -> WKWebView {
        let wv = WKWebView()
        wv.navigationDelegate = self
        webViews.append(wv)
        selectedWebView = wv
        wv.load(request)
        return wv
    }
}

extension NavigationState : WKNavigationDelegate {
    func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
        if webView == selectedWebView {
            self.currentURL = webView.url
        }
    }
}

struct WebView : UIViewRepresentable {
    
    @ObservedObject var navigationState : NavigationState
    
    func makeUIView(context: Context) -> UIView  {
        return UIView()
    }
    
    func updateUIView(_ uiView: UIView, context: Context) {
        guard let webView = navigationState.selectedWebView else {
            return
        }
        if webView != uiView.subviews.first {
            uiView.subviews.forEach { $0.removeFromSuperview() }
            
            webView.frame = CGRect(origin: .zero, size: uiView.bounds.size)
            uiView.addSubview(webView)
        }
    }
}

struct ContentView: View {
    @StateObject var navigationState = NavigationState()
    
    var body: some View {
        VStack(){
            Button("create new tab"){
                navigationState.createNewWebView(withRequest: URLRequest(url: URL(string: "https://www.google.com")!))
            }
            Text(navigationState.currentURL?.absoluteString ?? "(none)")
            WebView(navigationState: navigationState)
                .clipped()
            HStack {
                Button("Back") {
                    navigationState.selectedWebView?.goBack()
                }
                Button("Forward") {
                    navigationState.selectedWebView?.goForward()
                }
            }
            
            List {
                ForEach(navigationState.webViews, id: \.self) { tab in
                    Button(action: {
                        navigationState.selectedWebView = tab
                    }) {
                        Text(tab.url?.absoluteString ?? "?")
                    }
                }
            }
        }
        
    }
}

我没有尝试存储 NavigationStates 的数组，而是重构了 NavigationState 以保存 Web 视图的数组。当前 URL 和选定的 Web 视图是 @Published 值，以便父视图可以看到 URL、选定的视图等。

WebView 必须进行重大更改，因为它必须在任何给定时间更新正在显示的 WKWebView。

这是非常粗略的边缘代码。如果这是我自己的项目，我会做更多的重构，但这应该能让你开始。

关于显示无效 URL 的错误，这实际上是第二个问题，可能需要更清楚（什么构成无效 URL？它来自哪里？你的意思是如果用户输入一个（在 UI 的某些部分你不是在描述）或者如果他们点击了页面上的无效链接？）