Flutter如何实现仅在Hover的容器显示单个编辑图标

问题核心在于父组件使用共享状态控制所有子组件的图标可见性，导致一个容器hover时所有组件同步更新。解决思路是将hover状态下沉到每个子组件内部，让每个AddProyectName容器独立管理自己的显示逻辑。

具体修改步骤 #

1. 重构AddProyectName为独立状态组件
   将原本依赖父组件状态的无状态组件，改为自带hover状态的有状态组件，自身处理鼠标进入/退出事件：

   class AddProyectName extends StatefulWidget {
     // 保留组件需要的业务参数（示例为项目名称）
     final String projectName;
   
     const AddProyectName({
       Key? key,
       required this.projectName,
     }) : super(key: key);
   
     @override
     _AddProyectNameState createState() => _AddProyectNameState();
   }
   
   class _AddProyectNameState extends State<AddProyectName> {
     // 组件内部维护hover状态，初始为false
     bool _isHovered = false;
   
     @override
     Widget build(BuildContext context) {
       return MouseRegion(
         // 鼠标进入容器时，标记为hover状态
         onEnter: (_) => setState(() => _isHovered = true),
         // 鼠标离开容器时，取消hover状态
         onExit: (_) => setState(() => _isHovered = false),
         child: Container(
           // 保留你原本的容器样式（比如宽度、 padding、背景色等）
           padding: EdgeInsets.all(16),
           margin: EdgeInsets.symmetric(vertical: 8),
           decoration: BoxDecoration(
             border: Border.all(color: Colors.grey),
             borderRadius: BorderRadius.circular(8),
           ),
           child: Stack(
             children: [
               // 原本的容器内容（比如项目名称文本）
               Align(
                 alignment: Alignment.centerLeft,
                 child: Text(widget.projectName),
               ),
               // 仅在hover时显示编辑图标
               if (_isHovered)
                 Align(
                   alignment: Alignment.centerRight,
                   child: Icon(Icons.edit, color: Colors.blue),
                 ),
             ],
           ),
         ),
       );
     }
   }
   

2. 修改父组件TaskCard的调用逻辑
   父组件不再需要维护共享的_isEditIconVisible状态，直接创建独立的AddProyectName实例即可：

   class TaskCard extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Padding(
         padding: EdgeInsets.all(16),
         child: Column(
           children: [
             AddProyectName(projectName: "项目1"),
             AddProyectName(projectName: "项目2"),
             AddProyectName(projectName: "项目3"),
             AddProyectName(projectName: "项目4"),
           ],
         ),
       );
     }
   }
   

为什么这样能解决问题 #

每个AddProyectName组件的_isHovered状态是独立的，MouseRegion的事件只会触发当前组件的状态更新，不会影响其他容器。这样就实现了仅hover的容器单独显示编辑图标的需求。

内容的提问来源于stack exchange，提问作者pomoworko.com