Flutter 图片悬停叠加效果

Question

我正在做一个 flutter web 项目，我想在我的图像上实现以下叠加效果，只要光标悬停在图像上，就会出现一些按钮，并且图像的不透明度会降低（或模糊）悬停时。

我试过 InkWell 和 GestureDector 但似乎没有任何效果。

这基本上就是我想要实现的目标：Preview。

Answer 1

尝试使用 hovering 包在 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..')),
                ),
              )

查看示例用例here

Answer 2

嗨，拉吉，这很简单

您只需要使用检测 onPointerHover 的侦听器小部件并更新您应用的状态

这里是apilink关注

Listener in Flutter

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

Answer 3

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

因此，实现此目的的基本方法是使用 Hovering 包。 另一种方法是使用 MouseRegion.

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

注意：我也尝试了Listener小部件，但要么我不太了解它，要么它太复杂了跟...共事。反正我是没能达到我想要的。