SwiftUI：Tabview，更改选项卡时保持状态

Posted 2023-02-24

【中文标题】SwiftUI：Tabview，更改选项卡时保持状态

【英文标题】：SwiftUI: Tabview, keep state when changing tab

【发布时间】：2019-09-24 16:41:09

【问题描述】：

我创建了一个应用程序，其中包含多个选项卡，每个选项卡都有一个 web 视图。

我的网页浏览：

struct WebView : UIViewRepresentable 

    let request: URLRequest


    func makeUIView(context: Context) -> WKWebView  
        return WKWebView()
    

    func updateUIView(_ uiView: WKWebView, context: Context) 
        uiView.load(request)
    

我更改选项卡时的问题，网络视图重新创建。我只想创建一次 webview，然后每次我更改选项卡时，它都会保持状态并且 webview 每次都不会充电

我的代码：

struct ContentView: View 

    var body: some View 
        TabView 
            WebView(request: URLRequest(url: URL(string: "https://www.google.com/")!))
                    .tabItem 
                        Image(systemName: "1.circle")
                        Text("Messenger")
                    .tag(0)

            WebView(request: URLRequest(url: URL(string: "https://facebook.com/login")!))
                    .tabItem 
                        Image(systemName: "2.circle")
                        Text("Trello")
                    .tag(1)
        
    

【问题讨论】：

TabView resets navigation stack when switching tabs的可能重复

【参考方案1】：

好吧，SwiftUI 视图是值，所以它们总是被复制，但 WKWebView 是对象，所以你不必重新创建它们（就像你在 UIViewRepresentable 中所做的那样），但你可以在创建后在某处保留引用。

这是一个示例代码，展示了如何做到这一点。为简单起见，我使用了静态的，但缓存容器可以放在任何合适的地方。

struct WebView : UIViewRepresentable 

    // static is only for demo, this can be some external model
    static var cache = [URL: WKWebView]()

    let request: URLRequest

    func makeUIView(context: Context) -> WKWebView  
        guard let url = request.url else  fatalError() 

        if let webView = WebView.cache[url] 
            return webView
        

        let webView = WKWebView()
        WebView.cache[url] = webView
        return webView
    

    func updateUIView(_ uiView: WKWebView, context: Context) 
        if uiView.url == nil 
            uiView.load(request)
        
    

【讨论】：

我保留了相同的代码：如何在选择选项卡时重置网页（重新加载相同的主机 URL）。基本上，我有 2 个选项卡加载具有不同 URL 的 Web 视图，并且当用户选择一个选项卡并浏览网页时。当用户再次点击相同的选项卡时，它应该重新加载 URL 而不是保留旧的 webview。我怎样才能做到这一点？希望您能对此有所帮助