Flutter中鼠标移至子组件点击时如何保持父组件悬浮效果？

问题描述 #

鼠标悬停在容器上时，编辑图标正常显示，但将鼠标移至编辑图标准备点击时，悬浮效果消失，图标随之隐藏，无法完成点击操作。

问题原因 #

编辑图标通过Positioned定位在容器外部，原代码仅给容器所在区域添加了MouseRegion监听。当鼠标从容器移到外部的编辑图标上时，会触发容器MouseRegion的onExit回调，将_isHovered设为false，导致图标隐藏。

解决方案 #

通过维护悬浮计数器跟踪鼠标是否处于容器或编辑图标区域内：鼠标进入容器/图标时计数器加1，离开时减1；仅当计数器归0时，才判定为完全离开悬浮区域，隐藏图标。

修改后的完整代码（add_proyects.dart） #

import 'package:flutter/material.dart';

class AddProyectName extends StatefulWidget {
  final Color color;
  final int index;
  final bool isEditable;

  const AddProyectName(this.color, {required this.index, this.isEditable = false, super.key});

  @override
  State<AddProyectName> createState() => _AddProyectNameState();
}

class _AddProyectNameState extends State<AddProyectName> {
  int _hoverCount = 0;
  // 通过计数器判断是否处于悬浮状态
  bool get _isHovered => _hoverCount > 0;

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (_) => setState(() => _hoverCount++),
      onExit: (_) => setState(() => _hoverCount--),
      cursor: SystemMouseCursors.click,
      child: Stack(
        fit: StackFit.loose,
        clipBehavior: Clip.none,
        children: [
          Container(
            width: 100,
            height: 100,
            color: widget.color,
          ),
          if (_isHovered && widget.isEditable)
            Positioned(
              left: -30,
              top: 30,
              // 给编辑图标添加MouseRegion监听，维护计数器
              child: MouseRegion(
                onEnter: (_) => setState(() => _hoverCount++),
                onExit: (_) => setState(() => _hoverCount--),
                child: GestureDetector(
                  onTap: () {
                    print('Edit icon tapped');
                  },
                  child: Column(
                    children: [
                      Icon(
                        Icons.edit,
                        color: Colors.white,
                        size: 20,
                      ),
                      const SizedBox(height: 4),
                      Container(
                        padding: const EdgeInsets.symmetric(vertical: 4.0, horizontal: 8.0),
                        decoration: BoxDecoration(
                          color: Colors.black,
                          borderRadius: BorderRadius.circular(4.0),
                        ),
                        child: const Text(
                          'Edit',
                          style: TextStyle(color: Colors.white, fontSize: 12),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
        ],
      ),
    );
  }
}

代码说明 #

1. 悬浮计数器_hoverCount：替代原有的布尔值_isHovered，精准跟踪鼠标在关联区域内的状态。
2. 双MouseRegion监听：分别给容器和编辑图标添加监听，鼠标在两个区域间移动时，计数器始终大于0，确保_isHovered保持为true，图标不会消失。
3. 计算属性_isHovered：通过计数器是否大于0判断悬浮状态，逻辑更健壮，避免单区域监听的边界问题。

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