Chewie组件全屏状态下GestureDetector无法检测双击手势求助

问题根源 #

当Chewie进入全屏模式时，会重新构建独立的全屏Widget树，你原本包裹在Chewie外层的GestureDetector不会被纳入这个新层级，导致全屏状态下双击事件无法被捕获。

解决方案 #

通过ChewieController的customControls参数自定义播放控件，在自定义控件内部添加GestureDetector监听双击事件。这样无论是否全屏，自定义控件都会作为播放器UI的一部分存在，确保事件正常触发。

修改后的完整代码如下：

import 'package:chewie/chewie.dart';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';

class MediaPlayerPage extends StatefulWidget {
  const MediaPlayerPage({
    Key? key,
  }) : super(key: key);

  @override
  State<MediaPlayerPage> createState() => _MediaPlayerPageState();
}

class _MediaPlayerPageState extends State<MediaPlayerPage> {
  late VideoPlayerController _videoController;
  late ChewieController _chewieController;

  @override
  void initState() {
    super.initState();

    _videoController = VideoPlayerController.network(
      'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
      videoPlayerOptions: VideoPlayerOptions(mixWithOthers: true),
    );

    _videoController.addListener(() {
      setState(() {});
    });

    _videoController.setLooping(true);
    _videoController.initialize();

    _chewieController = ChewieController(
      videoPlayerController: _videoController,
      autoPlay: true,
      looping: true,
      autoInitialize: true,
      allowPlaybackSpeedChanging: true,
      allowFullScreen: true,
      aspectRatio: 16/9,
      // 传入自定义播放控件
      customControls: _CustomVideoControls(
        onDoubleTap: () {
          print('double_tap_triggered');
          // 可在此添加自定义双击逻辑，比如快进/暂停、切换全屏等
        },
      ),
    );
  }

  @override
  void dispose() {
    _videoController.dispose();
    _chewieController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black54,
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: AspectRatio(
            aspectRatio: 16/9,
            // 移除外层GestureDetector，改用自定义控件内部的监听
            child: Chewie(
              controller: _chewieController,
            ),
          ),
        ),
      ),
    );
  }
}

// 自定义播放控件，继承默认控件保留原有功能
class _CustomVideoControls extends StatelessWidget {
  final VoidCallback onDoubleTap;

  const _CustomVideoControls({required this.onDoubleTap});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      behavior: HitTestBehavior.translucent,
      onDoubleTap: onDoubleTap,
      // 复用Chewie默认控件，无需从头实现播放、进度条等功能
      child: DefaultControls(
        controller: ChewieController.of(context)!,
      ),
    );
  }
}

关键说明 #

1. 移除了原外层的GestureDetector，将事件监听移至自定义控件内部
2. _CustomVideoControls继承Chewie的DefaultControls，保留播放、暂停、进度调节等原生功能
3. 自定义控件会跟随Chewie的全屏状态同步切换，确保双击事件在两种模式下都能触发

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