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

Question

为了更改悬停在某些小部件上的光标，我一直在使用MouseRegion，它与不同的子小部件完美结合。然而，当涉及到VideoPlayer作为它的孩子时，它就不起作用了。

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

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浏览器中运行了我的代码，这是我的颤振医生-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:srcflutter
• 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))

此容器是不可见的，并将其自身扩展到视频的边界。当鼠标悬停或停止在视频框上时，指定的光标(在本例中为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();
},
),
],
),
),
)