能否为SwiftUI TabView切换页面时添加自定义过渡动画？

我有如下受控TabView：

TabView(selection: $activeTab) {
  IntroductionView().tag(1)
  HomeView().tag(2)
  SettingsView().tag(3)
  ProfileView().tag(4)
}

我希望在activeTab切换时为每个视图添加过渡效果，比如简单的淡入淡出效果？

我尝试了如下写法：

TabView(selection: $activeTab) {
  IntroductionView().tag(1).transition(.opacity)
  HomeView().tag(2).transition(.opacity)
  SettingsView().tag(3).transition(.opacity)
  ProfileView().tag(4).transition(.opacity)
}
.animation(.smooth, value: activeTab)

但这似乎没有效果。有一些方案通过.tabViewStyle(.page(indexDisplayMode: .never))修饰符添加滑动动画，但这并非我想要的效果。

是否可以利用或扩展UIKit来添加淡入淡出过渡？

一、SwiftUI原生替代方案（不依赖UIKit） #

原生TabView的切换逻辑是直接替换视图，不会触发transition——因为它没有通过if/else或switch动态添加/移除视图。你可以用ZStack配合switch模拟Tab切换，这样就能正常触发过渡动画：

@State private var activeTab = 1

var body: some View {
  ZStack {
    switch activeTab {
    case 1:
      IntroductionView()
        .transition(.opacity)
    case 2:
      HomeView()
        .transition(.opacity)
    case 3:
      SettingsView()
        .transition(.opacity)
    case 4:
      ProfileView()
        .transition(.opacity)
    default:
      EmptyView()
    }
  }
  .animation(.smooth, value: activeTab)
  // 自定义底部TabBar
  .safeAreaInset(edge: .bottom) {
    HStack(spacing: 0) {
      TabBarItem(title: "介绍", isActive: activeTab == 1) {
        activeTab = 1
      }
      TabBarItem(title: "首页", isActive: activeTab == 2) {
        activeTab = 2
      }
      TabBarItem(title: "设置", isActive: activeTab == 3) {
        activeTab = 3
      }
      TabBarItem(title: "个人", isActive: activeTab == 4) {
        activeTab = 4
      }
    }
    .padding(.vertical, 8)
    .background(.white)
    .shadow(color: .black.opacity(0.1), radius: 2, x: 0, y: -1)
  }
}

// 自定义TabBarItem组件
struct TabBarItem: View {
  let title: String
  let isActive: Bool
  let action: () -> Void
  
  var body: some View {
    Button(action: action) {
      VStack(spacing: 4) {
        Text(title)
          .font(.caption)
          .foregroundColor(isActive ? .blue : .gray)
      }
      .frame(maxWidth: .infinity)
    }
  }
}

这种方式完全用SwiftUI实现，淡入淡出过渡可正常生效，同时能自由定制TabBar样式。

二、基于UIKit扩展的方案 #

如果坚持使用原生TabView，可以通过UIKit的UITabBarController添加过渡动画，步骤如下：

1. 创建UIKit过渡代理类 #

import UIKit

class TabTransitionDelegate: NSObject, UITabBarControllerDelegate {
  func tabBarController(_ tabBarController: UITabBarController, animationControllerForTransitionFrom fromVC: UIViewController, to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
    return FadeTransitionAnimator()
  }
}

class FadeTransitionAnimator: NSObject, UIViewControllerAnimatedTransitioning {
  func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
    return 0.3 // 动画时长
  }

  func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
    guard let toVC = transitionContext.viewController(forKey: .to),
          let fromVC = transitionContext.viewController(forKey: .from) else { return }
    
    transitionContext.containerView.addSubview(toVC.view)
    toVC.view.alpha = 0.0
    
    UIView.animate(withDuration: transitionDuration(using: transitionContext)) {
      fromVC.view.alpha = 0.0
      toVC.view.alpha = 1.0
    } completion: { _ in
      fromVC.view.alpha = 1.0 // 恢复原视图透明度，避免后续切换异常
      transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
    }
  }
}

2. 在SwiftUI中包装UITabBarController #

struct UIKitTabView: UIViewControllerRepresentable {
  @Binding var activeTab: Int
  let transitionDelegate = TabTransitionDelegate()
  
  func makeUIViewController(context: Context) -> UITabBarController {
    let tabBarController = UITabBarController()
    tabBarController.delegate = transitionDelegate
    
    // 包装SwiftUI视图为UIKit控制器
    let introVC = UIHostingController(rootView: IntroductionView())
    introVC.tabBarItem = UITabBarItem(title: "介绍", image: nil, tag: 1)
    
    let homeVC = UIHostingController(rootView: HomeView())
    homeVC.tabBarItem = UITabBarItem(title: "首页", image: nil, tag: 2)
    
    let settingsVC = UIHostingController(rootView: SettingsView())
    settingsVC.tabBarItem = UITabBarItem(title: "设置", image: nil, tag: 3)
    
    let profileVC = UIHostingController(rootView: ProfileView())
    profileVC.tabBarItem = UITabBarItem(title: "个人", image: nil, tag: 4)
    
    tabBarController.viewControllers = [introVC, homeVC, settingsVC, profileVC]
    tabBarController.selectedIndex = activeTab - 1 // 适配tag从1开始的索引差
    return tabBarController
  }
  
  func updateUIViewController(_ uiViewController: UITabBarController, context: Context) {
    uiViewController.selectedIndex = activeTab - 1
  }
}

3. 在SwiftUI视图中使用 #

@State private var activeTab = 1

var body: some View {
  UIKitTabView(activeTab: $activeTab)
}

这样原生TabView切换时就会触发淡入淡出过渡效果。

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