Flutter Web 如何实现图片悬停遮罩效果？使用InkWell、GestureDetector无效

之前用 InkWell、GestureDetector 实现不了预期效果，核心原因是这两个组件主要面向点击、触摸类交互，对Web端特有的纯悬停状态感知、状态驱动的层叠动画支持不足，能精准匹配需求的实现逻辑可以按下面的方式搭建：

核心实现逻辑 #

整个交互拆成三个随悬停状态联动的部分：基础图片的效果变化、淡入浮出的操作按钮层、鼠标进出的状态监听。

• 用 MouseRegion 作为整个图片卡片的最外层容器，这个组件原生适配Web端光标交互，内置 onEnter、onExit 回调，专门用来感知光标进入、离开组件区域的事件。
• 将卡片封装为StatefulWidget，维护一个布尔类型的悬停状态 _isHovering：光标进入时通过setState将值设为true，光标离开时设为false，驱动整个界面的状态切换。
• 用Stack做层叠布局，从底到顶依次排布两层内容：
  • 底层为图片组件：如果要实现降低不透明度的效果，直接用AnimatedOpacity包裹图片，正常状态下透明度设为1.0，悬停时降到0.6左右，搭配200ms的平滑曲线过渡；如果要做模糊效果，就把图片包在ImageFiltered组件里，根据_isHovering动态切换高斯模糊的半径参数。
  • 上层为操作按钮区域：同样用AnimatedOpacity包裹按钮组，正常状态下透明度设为0（完全不可见，不拦截下方图片的交互），悬停时透明度平滑升到1.0，按钮按照布局需求居中排列在容器中即可。

实操避坑要点 #

• 不要在悬停触发时才动态把按钮层插入组件树，按钮层要始终保留在组件树中，只调整透明度值，不然首次触发悬停时会出现组件初始化的卡顿。
• 给按钮层设置HitTestBehavior.deferToChild的命中规则，按钮未显示时不要拦截下方的鼠标事件。
• 如果出现光标移出区域后状态没有重置的情况，检查MouseRegion的检测范围是不是和实际图片的渲染边界完全对齐，有没有被其他组件遮挡导致onExit事件未触发。
• 不要强行依赖InkWell的内置交互效果做自定义遮罩，它的水波纹、高亮逻辑和自定义浮层、图片效果的适配性很差，反而增加调试成本。

内容的提问来源于stack exchange，提问作者Raj Aryan