Flutter 图像悬停叠加效果答案

【问题标题】：Flutter Image Hovering Overlay EffectFlutter 图像悬停叠加效果
【发布时间】：2021-06-23 04:43:52
【问题描述】：

我正在做一个颤动的网络项目，我想在我的图像上添加以下叠加效果，每当光标悬停在图像上时，应该会显示几个按钮，并且图像的不透明度会降低（或模糊) 悬停时。

我尝试了 InkWell 和 GestureDectector，但似乎没有任何效果。

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

【问题讨论】：

标签： flutter flutter-layout flutter-web flutter-animation flutter-image

【解决方案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

【讨论】：

【解决方案2】：

嗨，Raj，这很简单

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

这里是api链接关注它

Listener in Flutter

如有困难请在下方留言

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：