如何使鼠标悬停像 Twitter 的取消关注按钮一样？

Question

我希望鼠标悬停像 Twitter 的取消关注按钮一样：

如果我在 Twitter 上关注某人，我会将鼠标悬停在带有“关注”文本的按钮上，按钮的颜色会变为红色并带有“取消关注”文本。我怎样才能做到这一点？

我用谷歌搜索但找不到任何结果。

我的代码：

GestureDetector(
  onTap: () => setState(() => following = !following),
  child: Container(
    padding: const EdgeInsets.all(10.0),
    decoration: following ? BoxDecoration(border: Border.all(color: Colors.cyan), borderRadius: BorderRadius.circular(25.0)) : BoxDecoration(color: Colors.cyan, borderRadius: BorderRadius.circular(25.0)),
    child: Row(
      children: [
        Icon(following ? Icons.favorite : Icons.person_add_alt, color: following ? Colors.cyan : Colors.white),
        const SizedBox(width: AppSizes.10.0),
        Text(
          following ? "Following" : "Follow",
          style: TextStyle(color: following ? Colors.cyan : Colors.white),
        ),
      ],
    ),
  ),
),

如果您需要更多信息，请随时发表评论。

如何使鼠标悬停像 Twitter 的取消关注按钮一样？我将不胜感激任何帮助。先感谢您！

Answer 1

用MouseRegion 包装您的GestureDetector 以获取鼠标事件。

 return MouseRegion(
      onEnter: (event) {
        setState(() {
          following = true;
        });
      },
      onExit: (event) {
        setState(() {
          following = false;
        });
      },
      child: GestureDetector(