Flutter中如何给ReorderableListView的图标添加悬停变色效果？

解决方案 #

当前静态的Icon组件没有监听鼠标交互事件，所以没有悬停反馈和点击响应，修改方式如下：

步骤1：将列表项抽为单独的有状态组件，维护单条目的悬停状态

class TaskItem extends StatefulWidget {
  final String taskContent;
  final VoidCallback onLeadingTap;

  const TaskItem({
    super.key,
    required this.taskContent,
    required this.onLeadingTap,
  });

  @override
  State<TaskItem> createState() => _TaskItemState();
}

class _TaskItemState extends State<TaskItem> {
  bool _isLeadingHover = false;

  @override
  Widget build(BuildContext context) {
    return ListTile(
      key: widget.key,
      leading: GestureDetector(
        // 处理点击事件
        onTap: widget.onLeadingTap,
        child: MouseRegion(
          // 监听鼠标悬停状态
          onEnter: (_) => setState(() => _isLeadingHover = true),
          onExit: (_) => setState(() => _isLeadingHover = false),
          child: Icon(
            BeoticIcons.disc,
            // 悬停时切换颜色，可自定义为你需要的色值
            color: _isLeadingHover ? Colors.blueAccent : Colors.grey,
          ),
        ),
      ),
      title: Text(widget.taskContent),
      trailing: Icon(BeoticIcons.circle_check),
    );
  }
}

步骤2：替换原ReorderableListView的子项生成逻辑

children: listeTaches.map((e) => TaskItem(
  key: UniqueKey(),
  taskContent: e,
  onLeadingTap: () {
    // 此处编写左侧图标点击后的业务逻辑
    debugPrint('点击了任务：$e');
  },
)).toList(),

如果不需要抽离组件，也可以通过List<bool>存储所有条目的悬停状态，直接在map逻辑内判断颜色即可，抽离组件的方式复用性和可维护性更高。如果需要整个列表条目响应点击，直接给ListTile组件加onTap参数即可，不需要单独给leading套GestureDetector。

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