Flutter桌面应用：Widget hover时显示/隐藏功能失效求助

问题根源 #

你的代码存在两个关键问题导致功能异常：

1. 逻辑错位：OnHoverView初始visible=true，鼠标进入时仍设为true，离开设为false——如果你的需求是「初始隐藏，悬停时显示」，这逻辑完全反了；
2. Visibility组件的坑：当visible=false时，组件会从布局树中彻底移除，连带着MouseRegion的检测区域也消失，一旦隐藏就再也触发不了鼠标进入事件，没法再次显示。

修正后的代码 #

悬停处理组件（OnHoverView）

class OnHoverView extends StatefulWidget {
  final Widget child;
  // 自定义初始可见状态
  final bool initialVisible;
  // 控制悬停时是显示还是隐藏
  final bool showOnHover;

  const OnHoverView({
    super.key,
    required this.child,
    this.initialVisible = false,
    this.showOnHover = true,
  });

  @override
  State<OnHoverView> createState() => _OnHoverViewState();
}

class _OnHoverViewState extends State<OnHoverView> {
  late bool isVisible;
  
  @override
  void initState() {
    super.initState();
    isVisible = widget.initialVisible;
  }

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (event) => _updateVisibility(widget.showOnHover),
      onExit: (event) => _updateVisibility(!widget.showOnHover),
      // 用AnimatedOpacity替代Visibility，保留布局空间让MouseRegion能持续检测
      child: AnimatedOpacity(
        duration: const Duration(milliseconds: 200),
        opacity: isVisible ? 1.0 : 0.0,
        child: widget.child,
      ),
    );
  }

  void _updateVisibility(bool value) {
    setState(() {
      isVisible = value;
    });
  }
}

使用方式

如果需要初始隐藏，悬停时显示（最常见需求）：

OnHoverView(
  initialVisible: false,
  showOnHover: true,
  child: InkWell(
    onTap: () {},
    child: Container(
      // ... 你的按钮原有代码保持不变
    ),
  ),
)

如果需求是初始显示，悬停时隐藏，只需调整参数：

OnHoverView(
  initialVisible: true,
  showOnHover: false,
  child: InkWell(/* ... */),
)

核心改进点 #

• 替换Visibility为AnimatedOpacity：隐藏时仅改变透明度，组件仍占据布局位置，保证MouseRegion能持续捕捉鼠标事件；
• 增加可配置参数：不用修改组件内部代码就能适配不同的显示逻辑；
• 修正状态更新逻辑：确保鼠标进入/退出时的状态变化完全符合预期。

内容的提问来源于stack exchange，提问作者Shruti Ramnandan Sharma