如何在Flutter Reorderable ListView中实现单个ListTile尾部图标悬浮变色效果

你遇到的问题很典型——因为你用了全局的状态变量my_color和onEntered来控制所有图标的颜色，所以只要有一个图标触发hover事件，所有图标都会跟着变色。要实现单个图标独立响应hover，我们需要给每个列表项维护自己的hover状态，下面给你两种可行的解决方案：

方案一：用列表维护每个项的颜色状态 #

这种方法适合不想额外封装组件的场景，通过一个与任务列表对应的颜色列表来管理每个图标的状态：

1. 替换全局变量，初始化一个与任务列表长度一致的颜色列表：

// 每个任务的图标初始颜色都是灰色
List<Color> iconColors = List.generate(listeTaches.length, (_) => Colors.grey);

2. 修改hover事件处理方法，传入当前项的索引，只更新对应位置的颜色：

_updateIcon(int index, _) {
  setState(() {
    // 切换当前索引图标的颜色
    iconColors[index] = iconColors[index] == Colors.grey ? Colors.green : Colors.grey;
  });
}

3. 构建ListTile时，通过asMap()获取每个项的索引，绑定对应的颜色和hover事件（建议加上onExit恢复颜色，体验更友好）：

children: listeTaches.asMap().entries.map((entry) {
  final index = entry.key;
  final task = entry.value;
  return ListTile(
    key: UniqueKey(),
    leading: Icon(BeoticIcons.disc),
    title: Text(task.nom),
    subtitle: Text(task.nomProjet),
    trailing: MouseRegion(
      onHover: (_) => _updateIcon(index, _),
      onExit: (_) => setState(() => iconColors[index] = Colors.grey),
      child: Icon(BeoticIcons.circle_check, color: iconColors[index])
    )
  );
}).toList(),

⚠️ 注意：因为列表支持重新排序，所以在_onReorder方法里要同步更新颜色列表的顺序，保证颜色和任务一一对应：

_onReorder(oldIndex, newIndex) {
  setState((){
    if(newIndex > oldIndex){
      newIndex -= 1;
    }
    // 移动任务项
    final item = listeTaches.removeAt(oldIndex);
    listeTaches.insert(newIndex, item);
    // 同步移动对应的颜色状态
    final color = iconColors.removeAt(oldIndex);
    iconColors.insert(newIndex, color);
  });
}

方案二：封装独立的StatefulWidget（推荐） #

这种方法更符合Flutter的组件化思想，把每个ListTile封装成独立的状态组件，让每个项自己管理hover状态，不用在父组件里维护额外的状态列表：

先创建一个TaskTile组件：

class TaskTile extends StatefulWidget {
  final Tache task;
  const TaskTile({Key? key, required this.task}) : super(key: key);

  @override
  State<TaskTile> createState() => _TaskTileState();
}

class _TaskTileState extends State<TaskTile> {
  Color _iconColor = Colors.grey;

  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: Icon(BeoticIcons.disc),
      title: Text(widget.task.nom),
      subtitle: Text(widget.task.nomProjet),
      trailing: MouseRegion(
        onHover: (_) => setState(() => _iconColor = Colors.green),
        onExit: (_) => setState(() => _iconColor = Colors.grey),
        child: Icon(BeoticIcons.circle_check, color: _iconColor)
      )
    );
  }
}

然后在父组件的ReorderableListView里直接使用这个组件：

children: listeTaches.map((task) => TaskTile(
  key: UniqueKey(),
  task: task,
)).toList(),

这种方法的优势是状态完全隔离，排序时也不用额外处理颜色列表，代码更简洁易维护。

两种方案都能解决你的问题，根据你的实际场景选择就行～

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