Flutter图像悬停叠加效果

Question

我正在做一个flutter web项目，我希望在我的图像上有以下叠加效果，即每当光标悬停在图像上时，都会出现几个按钮，并且在悬停时图像的不透明度会降低(或模糊(。

我尝试过InkWell和GestureDectector，但似乎都不起作用。

这基本上就是我想要实现的：预览。

Answer 1

尝试使用悬停包在flutter_web上实现悬停效果。

首先，导入包：

import 'package:hovering/hovering.dart';

在StatelessWidget:中添加GlobalKey

final _key = GlobalKey<ScaffoldState>();

然后，使用HoverWidget:

HoverWidget(
hoverChild: Container(
height: 200,
width: 200,
color: Colors.green,
child: Center(child: Text('Hover Me..')),
),
onHover: (event) {
_key.currentState.showSnackBar(SnackBar(
content: Text('Yaay! I am Hovered'),
));
},
child: Container(
height: 200,
width: 200,
color: Colors.red,
child: Center(child: Text('Hover Me..')),
),
)

查看此处的示例用例

Answer 2

Hi-Raj这是一个非常简单的

你只需要使用侦听器小工具，它检测onPointerHover并更新你的应用程序的状态

这是api链接跟随它

Flutter 中的侦听器

如果有任何困难，请在下方评论

Answer 3

好吧，随着时间的推移，我已经尝试了很多方法，并希望分享我的见解，以防其他人也在寻找相同的解决方案。

因此，实现这一点的基本方法是使用Hovering包。另一种方法是使用鼠标区域。

您可以使用MouseRegion的onEnter和onExit属性来检测光标何时进入并离开要添加hove效果的区域/容器。您可以使用它在不同的应用程序状态之间切换。或者它也有onHover属性，这基本上告诉如果光标当前是否在该区域悬停，你也可以使用它。

注意：我也尝试了Listener小部件，但要么我不太理解它，要么它太复杂了，无法使用。无论如何，我无法实现我想要的。