Flutter中GestureDetector与video_player插件点击无响应问题

我正在实现点击视频本体即可暂停/播放的功能，无需单独设置按钮。但使用GestureDetector包裹VideoPlayer组件时点击无响应，将VideoPlayer替换为文本组件时，打印语句可正常触发。

原代码 #

body部分

body: FutureBuilder(
    future: _initializeVideoPlayerFuture,
    builder: (context, snapshot) {
      if (snapshot.connectionState == ConnectionState.done) {
        return GestureDetector(
            onTap: () {
              setState(() {
                devtools.log("Tapped");
                if (_controller.value.isPlaying) {
                  _controller.pause();
                } else {
                  _controller.play();
                }
              });
            },
            child: LayoutBuilder(
                builder: (context, constraints) =>
                    _controller.value.isInitialized
                        ? AspectRatio(
                            aspectRatio: constraints.maxWidth /
                                constraints.maxHeight,
                            child: VideoPlayer(_controller),
                          )
                        : Container()));
      } else {
        return const Center(
          child: CircularProgressIndicator(),
        );
      }
}

initState部分

void initState() {
super.initState();

_controller = VideoPlayerController.network(
  widget.videoURL,
)..play();

_initializeVideoPlayerFuture = _controller.initialize();

_controller.setLooping(true);
}

解决方案 #

原因 #

VideoPlayer组件自身会拦截并消费触摸事件（比如系统默认的播放控制栏交互），导致外层的GestureDetector无法接收到点击信号。

修复代码 #

将GestureDetector通过Stack放在VideoPlayer的上层，用透明容器占满视频区域，确保点击事件被上层的GestureDetector捕获：

修改后的body代码

body: FutureBuilder(
  future: _initializeVideoPlayerFuture,
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      return LayoutBuilder(
        builder: (context, constraints) => _controller.value.isInitialized
            ? AspectRatio(
                aspectRatio: constraints.maxWidth / constraints.maxHeight,
                child: Stack(
                  children: [
                    // 底层视频组件
                    VideoPlayer(_controller),
                    // 上层透明点击区域
                    GestureDetector(
                      onTap: () {
                        setState(() {
                          devtools.log("Tapped");
                          _controller.value.isPlaying
                              ? _controller.pause()
                              : _controller.play();
                        });
                      },
                      child: Container(color: Colors.transparent),
                    ),
                  ],
                ),
              )
            : Container(),
      );
    } else {
      return const Center(child: CircularProgressIndicator());
    }
  },
)

优化后的initState代码（可选）

原代码中初始化顺序存在逻辑问题，建议先完成初始化再执行播放、设置循环：

void initState() {
  super.initState();
  _controller = VideoPlayerController.network(widget.videoURL);
  // 初始化完成后再配置并播放
  _initializeVideoPlayerFuture = _controller.initialize().then((_) {
    setState(() {});
    _controller.setLooping(true);
    _controller.play();
  });
}

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