SwiftUI TabView实现点击已激活TabItem响应功能

SwiftUI的TabView默认不支持点击已激活的TabItem时让内容返回顶部的功能——直接给tabItem加onTapGesture不会触发，onChange(of: selectedTab)也只在切换到不同Tab时生效，无法检测重复点击同一个Tab的操作。

我们可以借助UIKit的UITabBarDelegate来捕获Tab的点击事件（包括重复点击已激活的Tab），再通过SwiftUI的ScrollViewReader实现内容滚动到顶部的功能。

1. 自定义TabBar点击监听Modifier #

先创建一个ViewModifier，用来给SwiftUI的TabView添加UITabBarController的代理，捕获所有Tab点击事件：

struct TabBarTapModifier: ViewModifier {
    var onTabTapped: (Int) -> Void
    
    func body(content: Content) -> some View {
        content
            .background(TabBarDelegateView(onTabTapped: onTabTapped))
    }
    
    struct TabBarDelegateView: UIViewControllerRepresentable {
        var onTabTapped: (Int) -> Void
        
        func makeUIViewController(context: Context) -> UIViewController {
            let vc = UIViewController()
            DispatchQueue.main.async {
                // 获取SwiftUI TabView对应的UITabBarController
                if let tabBarController = vc.parent as? UITabBarController {
                    tabBarController.delegate = context.coordinator
                }
            }
            return vc
        }
        
        func updateUIViewController(_ uiViewController: UIViewController, context: Context) {}
        
        func makeCoordinator() -> Coordinator {
            Coordinator(self)
        }
        
        class Coordinator: NSObject, UITabBarControllerDelegate {
            var parent: TabBarDelegateView
            
            init(_ parent: TabBarDelegateView) {
                self.parent = parent
            }
            
            // 捕获Tab点击事件，包括重复点击已激活的Tab
            func tabBarController(_ tabBarController: UITabBarController, didSelect viewController: UIViewController) {
                guard let index = tabBarController.viewControllers?.firstIndex(of: viewController) else { return }
                parent.onTabTapped(index)
            }
        }
    }
}

// 给View添加扩展，方便调用
extension View {
    func onTabBarTap(_ action: @escaping (Int) -> Void) -> some View {
        self.modifier(TabBarTapModifier(onTabTapped: action))
    }
}

2. 实现可滚动的Tab内容视图 #

创建一个通用的可滚动内容视图，通过ScrollViewReader响应滚动到顶部的触发信号：

struct ScrollableTabContent: View {
    let tabIndex: Int
    // 触发滚动到顶部的绑定值
    @Binding var scrollToTopTrigger: Int?
    
    var body: some View {
        ScrollView {
            ScrollViewReader { proxy in
                VStack(spacing: 20) {
                    // 模拟长列表内容
                    ForEach(0..<50) { index in
                        Text("Tab \(tabIndex) 内容 \(index)")
                            .font(.title)
                            .frame(maxWidth: .infinity)
                    }
                }
                .padding()
                // 监听触发信号，滚动到顶部
                .onChange(of: scrollToTopTrigger) { newValue in
                    if newValue == tabIndex {
                        proxy.scrollTo(0, anchor: .top)
                    }
                }
            }
        }
    }
}

3. 组装主视图 #

在主ContentView中使用上述组件，处理Tab点击逻辑：

struct ContentView: View {
    @State private var selectedTab = 0
    // 用来触发对应Tab滚动到顶部的信号
    @State private var scrollToTopForTab: Int?
    
    var body: some View {
        TabView(selection: $selectedTab) {
            ScrollableTabContent(tabIndex: 0, scrollToTopTrigger: $scrollToTopForTab)
                .tabItem {
                    Text("首页")
                    Image(systemName: "globe")
                }
                .tag(0)
            
            ScrollableTabContent(tabIndex: 1, scrollToTopTrigger: $scrollToTopForTab)
                .tabItem {
                    Label("编辑", image: "pencil")
                }
                .tag(1)
            
            ScrollableTabContent(tabIndex: 2, scrollToTopTrigger: $scrollToTopForTab)
                .tabItem {
                    VStack {
                        Text("设置")
                        Image(systemName: "gear")
                    }
                }
                .tag(2)
        }
        // 监听Tab点击事件
        .onTabBarTap { index in
            if index == selectedTab {
                // 点击已激活的Tab，触发滚动到顶部
                scrollToTopForTab = index
                // 重置信号，确保下次点击能再次触发
                DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
                    scrollToTopForTab = nil
                }
            } else {
                // 切换到新Tab，更新选中状态
                selectedTab = index
            }
        }
    }
}

原理说明 #

• 捕获Tab点击: 通过UITabBarDelegate的tabBarController(_:didSelect:)方法，我们可以捕获所有Tab的点击事件，包括重复点击已激活的Tab，这是SwiftUI原生API做不到的。
• 滚动到顶部: 使用ScrollViewReader获取滚动视图的代理，通过绑定值触发滚动到指定位置（这里是第一个元素，锚点设为顶部）。
• 信号重置: 每次触发滚动后重置绑定值，确保重复点击同一Tab时能再次触发滚动动作。

内容的提问来源于stack exchange，提问作者Tbi