Flutter中GestureDetector无法检测Chewie视频播放器点击事件求助

嗨，这个问题我之前也碰到过，咱们来唠唠原因和可行的解决办法：

为啥直接包裹Chewie时点击事件没反应？ #

Chewie组件内部藏着不少交互逻辑：比如视频播放视图、自带的控制按钮，还有处理双击暂停、滑动调进度的手势检测器。这些内部的手势组件会优先拦截并吃掉触摸事件，导致外层的GestureDetector根本收不到点击信号。

而把Chewie套进Container里时，Container本身是个纯容器，不会处理任何触摸事件，所以点击事件能顺利往上冒泡到外层的GestureDetector，跳转逻辑自然就触发了。

几种好用的解决办法 #

1. 保留Container嵌套方案（最省心） #

你现在的写法已经能正常工作，要是觉得够用，完全可以继续用：

GestureDetector(
  onTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => social(),
      ),
    );
  },
  child: Container(
    height: 200,
    color: Colors.black,
    margin: EdgeInsets.only(right: 200),
    child: Chewie(
      controller: _chewieController,
    ),
  ),
),

2. 用Stack叠加GestureDetector（更灵活） #

要是不想多一层Container，可以用Stack把GestureDetector铺在Chewie上方，这样点击时先触发跳转逻辑，还能通过behavior参数控制是否把事件传给Chewie：

Stack(
  children: [
    Chewie(
      controller: _chewieController,
    ),
    GestureDetector(
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => social(),
          ),
        );
      },
      // 设置translucent可以让点击同时触发Chewie的原有交互（比如双击暂停）
      // 要是只想跳转不想影响Chewie，就用HitTestBehavior.opaque
      behavior: HitTestBehavior.translucent,
    ),
  ],
)

3. 自定义Chewie控制栏（进阶玩法） #

如果需要更精细的控制——比如只在视频区域点击跳转，点控制栏不触发——可以自定义Chewie的控制组件，在自定义控件里加点击逻辑：

Chewie(
  controller: _chewieController.copyWith(
    customControls: CustomVideoControls(
      onVideoTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => social(),
          ),
        );
      },
    ),
  ),
)

（这里的CustomVideoControls需要自己实现，继承Chewie的MaterialControls或CupertinoControls，然后在视频区域添加点击回调即可）

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