如何隐藏matchedTransitionSource的背景，并解决滑动返回手势下带动画NavigationLink的背景显示问题？

嗨，我完全懂你遇到的困扰——带匹配过渡动画的NavigationLink，在使用滑动返回手势时，原页面里那个过渡源视图的背景总是会露出来，破坏了像iOS照片APP那样丝滑的过渡体验对吧？我来给你分享几个实用的解决思路：

• 直接给过渡源设置透明背景（最简单的方案）
  很多时候这个问题是因为过渡源视图自带了系统默认的背景，或者我们自己给它加的背景没有在过渡时同步隐藏。只需要把过渡源的背景设为透明，再确保详情页的过渡目标视图背景正常显示就好：

  struct ContentView: View {
      @State private var isActive = false
      @Namespace private var transitionNamespace
      
      var body: some View {
          NavigationStack {
              VStack(spacing: 20) {
                  // 过渡源视图：背景设为透明
                  Circle()
                      .fill(Color.blue)
                      .frame(width: 80, height: 80)
                      .background(Color.clear)
                      .matchedTransitionSource(id: "circleTransition", in: transitionNamespace)
                      .onTapGesture {
                          isActive = true
                      }
              }
              .navigationDestination(isPresented: $isActive) {
                  DetailView(transitionNamespace: transitionNamespace)
              }
          }
      }
  }
  
  struct DetailView: View {
      let transitionNamespace: Namespace.ID
      
      var body: some View {
          Circle()
              .fill(Color.blue)
              .frame(maxWidth: .infinity, maxHeight: .infinity)
              .matchedTransitionDestination(id: "circleTransition", in: transitionNamespace)
              .background(Color.white) // 详情页的正常背景
      }
  }
  

• 用UIKit代理精细控制滑动返回状态
  如果你的场景更复杂，比如需要根据滑动进度动态调整视图状态，可以借助SwiftUI底层的UIKit导航控制器代理来实现。我们可以自定义一个代理视图，监听滑动返回的手势，然后控制原页面过渡源的显示状态：

  // 自定义导航控制器代理
  struct NavigationSwipeProxy: UIViewControllerRepresentable {
      var onSwipeProgress: (CGFloat) -> Void
      
      func makeUIViewController(context: Context) -> UIViewController {
          UIViewController()
      }
      
      func updateUIViewController(_ uiViewController: UIViewController, context: Context) {
          guard let navController = uiViewController.navigationController else { return }
          navController.delegate = context.coordinator
      }
      
      func makeCoordinator() -> Coordinator {
          Coordinator(self)
      }
      
      class Coordinator: NSObject, UINavigationControllerDelegate {
          let parent: NavigationSwipeProxy
          
          init(_ parent: NavigationSwipeProxy) {
              self.parent = parent
          }
          
          func navigationController(_ navigationController: UINavigationController, willShow viewController: UIViewController, animated: Bool) {
              // 检测是否触发了滑动返回手势
              if let gesture = navigationController.interactivePopGestureRecognizer, gesture.state == .began {
                  parent.onSwipeProgress(1.0)
              }
          }
      }
  }
  

  然后在主视图里使用这个代理：

  struct ContentView: View {
      @State private var isActive = false
      @State private var hideSource = false
      @Namespace private var transitionNamespace
      
      var body: some View {
          NavigationStack {
              VStack(spacing: 20) {
                  Circle()
                      .fill(Color.blue)
                      .frame(width: 80, height: 80)
                      .matchedTransitionSource(id: "circleTransition", in: transitionNamespace)
                      .opacity(hideSource ? 0 : 1) // 根据滑动状态隐藏
                      .onTapGesture {
                          isActive = true
                      }
              }
              .navigationDestination(isPresented: $isActive) {
                  DetailView(transitionNamespace: transitionNamespace)
              }
          }
          .overlay(NavigationSwipeProxy { progress in
              withAnimation(.easeInOut) {
                  hideSource = progress > 0
              }
          })
      }
  }
  

• 分离过渡源和背景视图
  如果你的过渡源视图是叠加在一个背景上的，可以把背景和过渡元素分开，用ZStack包裹，这样滑动返回时只隐藏背景，保留过渡动画的连贯性：

  ZStack {
      // 过渡源的背景视图，滑动时隐藏
      Color.gray.opacity(0.2)
          .frame(width: 100, height: 100)
          .cornerRadius(10)
          .opacity(hideSource ? 0 : 1)
      
      // 过渡源元素，保留过渡动画
      Circle()
          .fill(Color.blue)
          .frame(width: 80, height: 80)
          .matchedTransitionSource(id: "circleTransition", in: transitionNamespace)
          .onTapGesture {
              isActive = true
          }
  }
  

这些方案里，第一种适合大多数简单场景，直接就能解决问题；第二种适合需要精细交互的情况；第三种则针对背景和过渡元素分离的UI结构。你可以根据自己的页面布局选择最合适的方式，调整后应该就能实现像iOS照片APP那样流畅的过渡效果啦～

备注：内容来源于stack exchange，提问作者routern