在 flutter web 中更改悬停在 VideoPlayer 对象上的鼠标光标

Question

为了更改悬停在某些小部件上的光标，我一直在使用 MouseRegion 与不同的子部件完美结合。但是，当涉及 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();
          },
        ),
      ],
    ),
  ),
)

当视频框第一次出现在鼠标光标顶部时（在创建小部件时），光标会按预期消失；但是，通过将其移出并重新进入视频框，它仍然可见。我进行了大量搜索以找出问题所在，发现 这个未解决的问题与我正在经历什么。然而，我仍然认为将光标隐藏在正在播放的视频顶部应该很简单，因为这就是 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

在视频上堆叠一个零不透明度容器似乎是一种解决方法：

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

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

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();
          },
        ),
      ],
    ),
  ),
)