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

Posted 2023-02-23

【中文标题】如何在颤动的 ReorderableListView 图标上添加颜色变化？

【英文标题】：How to add a change of color hover on ReorderableListView icons in flutter?

【发布时间】：2021-11-17 17:55:09

【问题描述】：

我的应用中有这个 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(), 

感谢您的帮助！

【参考方案1】：

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

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

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

试试下面的图标

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

【参考方案2】：

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

问候

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案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;
      );

希望我能帮忙:)

【讨论】：

谢谢，我试过了，它可以工作......但只有一次，当我悬停它时，它会改变颜色，但新颜色会保持不变，它会改变列表中每个图标的颜色，而不是只有一个被选中，当我再次悬停时，它会复制列表元素，并且所有这些都是无限期的。

我尝试使用 onEnter 和 onExit 属性而不是 onHover 以便在我用鼠标离开图标后颜色恢复到旧颜色，但在我重新悬停后它仍然可以工作一次图标无限期地重复（在每次新的悬停时）并且不要改变颜色。

当我收到您的第二条评论的通知时，我正在编辑我的答案，告诉您使用 onEnter 和 onExit 事件哈哈。我会做更多的思考和研究，因为我现在不明白为什么会发生这种情况，也许它与函数的使用有关。尝试在 onEnter 事件之后直接进行更改，并告诉我们它是否更改了某些内容。

能否提供一些在列表中插入数据的代码？

首先非常感谢您的帮助。好吧，我可能已经确定了问题，但目前我不知道如何解决它。对于我的另一个问题，您使用索引的解决方案很有意义，我正在尝试研究如何实现它，但我不得不承认，我现在有点卡住了。如果您有任何实施索引的示例，我将采用它:)