如何在颤动的 ReorderableListView 图标上添加颜色变化？

Question

我的应用中有这个 ReorderableListView，我希望 当我将鼠标悬停在左侧的复选圆圈图标上时，它们会改变颜色,

现在当我将鼠标悬停在它上面时，什么也没有发生，它们甚至无法点击

这是 ReorderableListView 代码的一部分，我在其中定义每个项目的图标和文本：

children: listeTaches.map((e) => ListTile(
                      key: UniqueKey(),
                      //leading: Icon(Icons.task),
                      leading: Icon(BeoticIcons.disc),
                      title: Text(e),
                      //trailing: Icon(Icons.more_vert),
                      trailing: Icon(BeoticIcons.circle_check)
                    )).toList(), 

感谢您的帮助！

Answer 1

试试下面的代码希望对你有帮助：

我认为就像我们的图标小部件一样。

Icon(Icons.add,color:Colors.red),

试试下面的图标

 Icon(BeoticIcons.circle_check,color:Colors.red),

Answer 2

您需要处理该事件并在它发生时启动所需的代码。为此，您将需要一个 StatefulWidget 并控制触发它的事件 (https://flutter.dev/docs/development/ui/advanced/gestures)。

问候

Answer 3

您可以使用Mouse Region 来处理与您的图标的悬停交互。如果你用鼠标区域包裹你的图标小部件，那么你只需在 onHover 事件中更改颜色。像这样：

children: listeTaches.map((e) => ListTile(
                  key: UniqueKey(),
                  //leading: Icon(Icons.task),
                  leading: MouseRegion(
                              onHover: _updateIcon,
                              child:Icon(BeoticIcons.disc, color:my_color)),
                  title: Text(e),
                  //trailing: Icon(Icons.more_vert),
                  trailing: Icon(BeoticIcons.circle_check)
                )).toList(),               

然后在 _updateIcon 中，您可以更改图标用作颜色的变量

final my_color = Colors.grey; //declare before with the default color of your icon
   
      _updateIcon(){
      setState(() {
        my_color = Colors.red;
      });
}

希望我能帮忙:)