在 flutter web 中将鼠标悬停在 VideoPlayer 对象上时隐藏鼠标光标

Question

为了更改悬停在某些小部件上的光标，我一直在使用 MouseRegion which works perfectly in combination with different child widgets. However, it doesn't work when it comes to VideoPlayer 作为其子项。

我想要的是当鼠标光标悬停在我使用 flutter 的 video_player 插件处理的视频上时隐藏鼠标光标，这是我的简化代码：

MouseRegion(
  cursor: SystemMouseCursors.none,
  child: AspectRatio(
    aspectRatio: _controller.value.aspectRatio,
    child: Stack(
      children: [
        VideoPlayer(_controller),
        GestureDetector(
          onTap: () {
            _controller.value.isPlaying
                ? _controller.pause()
                : _controller.play();
          },
        ),
      ],
    ),
  ),
)

当视频框首次出现在鼠标光标上方时（在创建小部件时），光标会按预期消失；然而，通过将它移到外面并重新进入视频框，它仍然可见。我进行了大量搜索以找出问题所在，发现 this open issue 与我遇到的问题有很大关系。但是，我仍然相信将光标隐藏在正在播放的视频顶部应该很简单，因为这就是 YouTube 上发生的事情，视频播放几秒钟后。任何解决方案将不胜感激。

我在 Chrome 浏览器中运行我的代码，这是我的 flutter doctor -v:

[√] Flutter (Channel stable, 2.10.3, on Microsoft Windows [Version 10.0.22000.493], locale en-BE)
    • Flutter version 2.10.3 at C:\src\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 7e9793dee1 (8 days ago), 2022-03-02 11:23:12 -0600
    • Engine revision bd539267b4
    • Dart version 2.16.1
    • DevTools version 2.9.2

Answer 1

在视频上堆叠 zero-opacity 容器似乎是一种解决方法：

Container(color: Colors.black.withOpacity(0.0))

此容器是不可见的，并且会自行扩展到视频的边界。指定的光标（在本例中为 none）将始终在鼠标悬停或停在视频框上时显示。代码将如下所示：

MouseRegion(
  cursor: SystemMouseCursors.none,
  child: AspectRatio(
    aspectRatio: _controller.value.aspectRatio,
    child: Stack(
      children: [
        VideoPlayer(_controller),
        Container(color: Colors.black.withOpacity(0.0)),
        GestureDetector(
          onTap: () {
            _controller.value.isPlaying
                ? _controller.pause()
                : _controller.play();
          },
        ),
      ],
    ),
  ),
)

在 flutter web 中将鼠标悬停在 VideoPlayer 对象上时隐藏鼠标光标

Hide mouse cursor when it hovers over a VideoPlayer object in flutter web

flutter

flutter-web

flutter-video-player