Flutter中基于Navigator如何跨多屏幕检测手势实现拖拽过渡动画？

你的问题核心是：路由切换后，新页面的Widget会拦截指针事件，导致外层的手势检测失效。因为Flutter的事件传递是从最上层Widget往下，新页面的Scaffold、Material这类组件默认会消费所有指针事件，下层的GestureDetector/Listener自然拿不到信号。

直接改外层监听没用，得把手势控制逻辑嵌到路由的过渡动画里，每个路由都自带拖拽控制，这样不管怎么切换路由，监听逻辑都跟着当前路由走。

• 自定义带拖拽控制的路由类
  用PageRouteBuilder或者继承ModalRoute，在过渡动画的构建逻辑里加入GestureDetector，实时绑定拖拽进度到动画控制器：

class DraggableTransitionRoute<T> extends PageRoute<T> {
  final WidgetBuilder builder;
  final AnimationController? controller;

  DraggableTransitionRoute({
    required this.builder,
    super.settings,
  }) : controller = AnimationController(
          vsync: NavigatorState.of(WidgetsBinding.instance.context!)!,
          duration: const Duration(milliseconds: 300),
        );

  @override
  Widget buildPage(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
    return builder(context);
  }

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
    // 用GestureDetector包裹过渡动画，监听水平拖拽
    return GestureDetector(
      onHorizontalDragUpdate: (details) {
        // 根据拖拽距离更新动画进度，逻辑可按需调整
        final delta = details.primaryDelta! / MediaQuery.of(context).size.width;
        controller!.value -= delta;
      },
      onHorizontalDragEnd: (details) {
        // 拖拽结束时，根据当前进度决定完成动画或回退
        if (controller!.value > 0.5) {
          controller!.forward();
        } else {
          controller!.reverse().then((_) => Navigator.pop(context));
        }
      },
      // 这里用SlideTransition示例，可替换为自定义过渡动画
      child: SlideTransition(
        position: Tween<Offset>(
          begin: const Offset(1.0, 0.0),
          end: Offset.zero,
        ).animate(CurvedAnimation(parent: controller!, curve: Curves.easeInOut)),
        child: child,
      ),
    );
  }

  @override
  Duration get transitionDuration => const Duration(milliseconds: 300);

  @override
  bool get maintainState => true;
}

• 使用自定义路由跳转
  替代默认的Navigator.push，用自定义路由实现跳转：

Navigator.push(
  context,
  DraggableTransitionRoute(
    builder: (context) => const SecondScreen(),
  ),
);

• 全局统一过渡优化
  如果需要所有路由都默认使用这种拖拽过渡，可给MaterialApp设置onGenerateRoute：

MaterialApp(
  onGenerateRoute: (settings) {
    return DraggableTransitionRoute(
      builder: (context) {
        // 根据路由名称返回对应页面
        switch(settings.name) {
          case '/second':
            return const SecondScreen();
          default:
            return const HomeScreen();
        }
      },
      settings: settings,
    );
  },
);

这种方式将手势监听与路由过渡绑定，不管路由如何切换，当前页面的过渡层都能正常接收拖拽事件，不会被新页面拦截。

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