Flutter Web：如何检测鼠标悬停在Container Widget上？

在Flutter Web中检测鼠标悬停在Container上，核心是用MouseRegion组件包裹目标Container，通过它的回调函数监听鼠标进入/离开事件。

实现步骤： #

1. 使用StatefulWidget维护悬停状态（比如isHovered）
2. 用MouseRegion包裹Container，绑定onEnter和onExit回调来更新状态
3. 根据悬停状态动态调整Container的样式（可选，用于视觉反馈）

完整代码示例： #

import 'package:flutter/material.dart';

class HoverableContainer extends StatefulWidget {
  const HoverableContainer({super.key});

  @override
  State<HoverableContainer> createState() => _HoverableContainerState();
}

class _HoverableContainerState extends State<HoverableContainer> {
  bool _isHovered = false;

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      // 鼠标进入Container时触发
      onEnter: (_) => setState(() => _isHovered = true),
      // 鼠标离开Container时触发
      onExit: (_) => setState(() => _isHovered = false),
      child: Container(
        width: 200,
        height: 200,
        // 根据悬停状态切换背景色
        color: _isHovered ? Colors.blueAccent : Colors.grey,
        alignment: Alignment.center,
        child: Text(
          _isHovered ? "鼠标已悬停" : "等待鼠标悬停",
          style: const TextStyle(color: Colors.white, fontSize: 16),
        ),
      ),
    );
  }
}

// 在页面中使用示例：
// Scaffold(
//   body: Center(child: HoverableContainer()),
// )

关键说明： #

• MouseRegion的回调参数是PointerEnterEvent/PointerExitEvent，如果不需要事件细节可以直接用_忽略
• 如果仅需检测悬停事件无需视觉反馈，可去掉状态更新后的样式变化，只在回调中执行业务逻辑
• 该方案天然支持Flutter Web，无需额外依赖或配置

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