Flutter动画中点击卡片停动却不跳转，如何实现动画中可点击导航？

1. 让点击事件穿透动画容器 #

动画组件默认可能会拦截点击，给GestureDetector设置behavior属性，确保点击能被正确捕获：

GestureDetector(
  behavior: HitTestBehavior.translucent, // 也可使用HitTestBehavior.opaque
  onTap: () {
    _animationController.stop();
    Navigator.push(context, MaterialPageRoute(builder: (_) => TargetPage()));
  },
  child: AnimatedBuilder(
    animation: _animationController,
    builder: (context, child) {
      return Transform.translate(
        offset: Offset(_animation.value * MediaQuery.of(context).size.width, 0),
        child: YourCardWidget(),
      );
    },
  ),
)

2. 修复动画状态与导航的调度问题 #

如果暂停动画后导航仍未触发，试试用WidgetsBinding把导航操作放到帧回调里执行，确保动画状态更新后再跳转：

onTap: () {
  _animationController.stop(canceled: false); // 停止动画但保留当前状态
  WidgetsBinding.instance.addPostFrameCallback((_) {
    Navigator.push(context, MaterialPageRoute(builder: (_) => TargetPage()));
  });
},

3. 封装动画卡片，绑定点击到卡片本身 #

把动画和卡片封装成自定义AnimatedWidget，让点击事件直接绑定在卡片上，避免容器拦截：

class SlideCard extends AnimatedWidget {
  final VoidCallback onTap;
  final Widget child;

  const SlideCard({
    super.key,
    required Animation<double> animation,
    required this.onTap,
    required this.child,
  }) : super(listenable: animation);

  @override
  Widget build(BuildContext context) {
    final animation = listenable as Animation<double>;
    return GestureDetector(
      onTap: onTap,
      child: Transform.translate(
        offset: Offset(animation.value * MediaQuery.of(context).size.width, 0),
        child: child,
      ),
    );
  }
}

// 使用示例
SlideCard(
  animation: _animation,
  onTap: () {
    _animationController.stop();
    Navigator.push(context, MaterialPageRoute(builder: (_) => TargetPage()));
  },
  child: YourCardWidget(),
)

4. 排查点击拦截问题 #

检查卡片上方有没有Stack里的透明组件、IgnorePointer或者其他手势组件，这些可能会吃掉点击事件。可以临时给卡片加个红色边框，确认点击区域是否和卡片重合。

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