如何在不失去控件焦点的情况下向视频播放器添加双击手势？

Question

我尝试通过包裹

return ClipRRect(
            borderRadius: BorderRadius.circular(30.0),
            child: Chewie(
              controller: _chewieController,
            )

与

return Stack(
            children: [
              ClipRRect(
                borderRadius: BorderRadius.circular(30.0),
                child: Chewie(
                  controller: _chewieController,
                ),
              ),
              Positioned.fill(child: GestureDetector(
                onDoubleTap: (){
                  print('its double tapped ');
                },
                child: Container(
                  color: Colors.transparent,
                  height: double.infinity,
                  width: double.infinity,
                ),))
            ],
          );

现在我可以双击，但是单击一下，控制器不会出现，有什么方法可以实现这两件事。
使用 doubleTap，我可以调用类似的函数，并使用 onTap 来显示控制器。
上面使用的包chegie 0.12.0

Answer 1

我不知道

Chewie

是如何构建的，但如果有 GestureDetector 你可以将其更改为如下所示：

GestureDetector(
    behavior: HitTestBehavior.opaque,
    onTap: () => setState(() => // show_controls,),
    onDoubleTap:() => setState(() => // like behaviour,),
    child: VideoWidget // or whatever is there
}

因此您可以在一个小部件上拥有两个侦听器。我认为这样

onTap

会稍有延迟来检查它是否不是

onDoubleTap

。这样你就不必在你的小部件之上放置覆盖层。

如果出于某种原因你想要这个覆盖...那么这里有趣的属性是

behaviour

，因为它决定后面的元素是否会接收事件。

https://api.flutter.dev/flutter/rendering/PlatformViewHitTestBehavior-class.html

更新 尝试换成

GestureDetector(
                behavior: HitTestBehavior.translucent,
                onDoubleTap: (){
                  print('its double tapped ');
                }

或

在github项目中，这一行： https://github.com/flutter/plugins/blob/master/packages/video_player/video_player/example/lib/main.dart#L290

似乎控件仅在视频处于暂停状态时显示。大约就是这个值

controller.value.isPlaying

.

为什么不在自己的 GestureDetector 中控制它？

GestureDetector(
    behavior: HitTestBehavior.opaque,
    onTap: () => setState(() => _controller.pause() ,), //changing here 
    onDoubleTap:() => setState(() => // like behaviour,),
    child: VideoWidget // or whatever is there
}

无论如何，希望你能找到答案

Answer 2

return GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTapDown: (_) {
              setState(() {
                isMute = !isMute;
                _chewieController.setVolume(isMute ? 0 : 1);
              });
            },
            onDoubleTap: (){
              print('liked');
            },
            child: ClipRRect(
              borderRadius: BorderRadius.circular(30.0),
              child: Chewie(
                controller: _chewieController,
              ),
            ),
          );

在视频上的简单 onTap 上，它显示控制器，此处的 onTap 不会被覆盖，因此
onTapDown 用作 onTap 的替代品来使视频静音。

Answer 3

我应用了一些定制。您可以使用以下方式

Scaffold(
    backgroundColor: Colors.black54,
    body: Stack(
      children: [
        Container(
          alignment: Alignment.center,
          height: Get.height,
          width: Get.width,
          child: Center(
            child: Chewie(
              key: UniqueKey(),
              controller: _chewieController,
            ),
          ),
        ),
        Container(
          alignment: Alignment.center,
          height: Get.height,
          width: Get.width,
          child: Row(
            children: [
              Expanded(
                child: GestureDetector(
                  onDoubleTap: () async {
                    // for seeking backward
                    var position = await _chewieController
                        .videoPlayerController.position;
                    if (position != null) {
                      _chewieController
                          .seekTo(position - const Duration(seconds: 5));
                    }
                  },
                ),
              ),
              const SizedBox(width: 30.0),
              Expanded(
                child: GestureDetector(
                  onDoubleTap: () async {
                         // for seeking forward
                          var position = await _chewieController
                              .videoPlayerController.position;
                          if (position != null) {
                            _chewieController.seekTo(
                                position + const Duration(seconds: 5));
                          }
                        },
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  ),