SwiftUI小技巧之如何解决Tab切换后页面重置和List刷新bug

SwiftUI的tabview非常好用，简单几行就能构建一套基于Tab的App。但是SwiftUI目前tabview存在一个小bug，当tab切换时内部中的list或NavigationLink将会重新刷新。

看看bug

Jietu20200315-211354.gif

当我们切换到新的tab时，第一个tab被重置回初始状态了。

这个bug可以修复么

我们有两种解决方案，一种等6月份等WWDC新版发布，修复这个bug。另外就是自己动手封装一个tabview

实战解决

1、测试页面

import SwiftUI

struct ExampleView: View {
    @State var text: String = ""
    
    var body: some View {
        UIKitTabView([
            UIKitTabView.Tab(view: NavView(), title: "首页", image: "phone32.png"),
            UIKitTabView.Tab(view: Text("Second View"), title: "其他", image: "")
        ])
    }
}

struct NavView: View {
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: Text("您能看到这个页面，则证明bug修复")) {
                    Text("显示详细页")
                }
            }
        }
    }
}

2、封装个UIkitTabview

struct UIKitTabView: View {
    var viewControllers: [UIHostingController]
    @State var selectedIndex: Int = 0
    
    init(_ views: [Tab]) {
        self.viewControllers = views.map {
            let host = UIHostingController(rootView: $0.view)
            host.tabBarItem = $0.barItem
            return host
        }
    }
    
    var body: some View {
        TabBarController(controllers: viewControllers, selectedIndex: $selectedIndex)
            .edgesIgnoringSafeArea(.all)
    }
    
    struct Tab {
        var view: AnyView
        var barItem: UITabBarItem
        
        init(view: V, barItem: UITabBarItem) {
            self.view = AnyView(view)
            self.barItem = barItem
        }
        
        // convenience
        init(view: V, title: String?, image: String, selectedImage: String? = nil) {
            let selectedImage = selectedImage != nil ? UIImage(named: selectedImage!) : nil
            let barItem = UITabBarItem(title: title, image: UIImage(named: image), selectedImage: selectedImage)
            self.init(view: view, barItem: barItem)
        }
    }
}

3、制作一个TabBarController

import SwiftUI
import UIKit

struct TabBarController: UIViewControllerRepresentable {
    var controllers: [UIViewController]
    @Binding var selectedIndex: Int

    func makeUIViewController(context: Context) -> UITabBarController {
        let tabBarController = UITabBarController()
        tabBarController.viewControllers = controllers
        tabBarController.delegate = context.coordinator
        tabBarController.selectedIndex = 0
        return tabBarController
    }

    func updateUIViewController(_ tabBarController: UITabBarController, context: Context) {
        tabBarController.selectedIndex = selectedIndex
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject, UITabBarControllerDelegate {
        var parent: TabBarController

        init(_ tabBarController: TabBarController) {
            self.parent = tabBarController
        }
        
        func tabBarController(_ tabBarController: UITabBarController, didSelect viewController: UIViewController) {
            parent.selectedIndex = tabBarController.selectedIndex
        }
    }
}

技术交流

QQ:3365059189
SwiftUI技术交流QQ群:518696470

• 请关注我的专栏icloudend, SwiftUI教程与源码
  https://www.jianshu.com/c/7b3e3b671970