更改鼠标光标悬停在颤动网络中的 VideoPlayer 对象上答案

【问题标题】：Change mouse cursor on hovers over a VideoPlayer object in flutter web更改鼠标光标悬停在颤动网络中的 VideoPlayer 对象上
【发布时间】：2022-07-26 19:35:59
【问题描述】：

为了改变悬停在某些小部件上的光标，我一直在使用MouseRegion，它可以与不同的子小部件完美结合。但是，将 VideoPlayer 作为其子级时，它不起作用。

我想要的是当鼠标悬停在我正在使用颤振的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 浏览器中运行了我的代码，这是我的颤振医生 -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

【问题讨论】：

标签： flutter flutter-web flutter-video-player

【解决方案1】：

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

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

【讨论】：