Flutter-Web:鼠标悬停->将光标更改为指针

Question

更新(2021/05/11):

Flutter 现在原生实现了悬停事件小部件。

对于像 RaisedButton 这样的小部件和像 hoverColor 或 hoverElevation 这样的属性有一个 MouseCursor。

https://api.flutter.dev/flutter/services/MouseCursor-class.html

您也可以在接受的答案中说明的其他任何地方使用 InkWell。

---

原问题:

如何在 Flutter 中更改光标外观？我知道 Listener()我们可以监听鼠标事件的小部件，但我还没有找到任何关于 flutter 网络悬停事件的信息。有人找到解决方案了吗？

Answer 1

我很难找到关于现在内置支持的文档。这对我有帮助:https://github.com/flutter/flutter/issues/58260

这对我有用，无需更改 index.html 等。

MouseRegion(
  cursor: SystemMouseCursors.click,
    child: GestureDetector(
      child: Icon(
        Icons.add_comment,
        size: 20,
        ),
      onTap: () {},
    ),
  ),

另见官方文档:https://api.flutter.dev/flutter/rendering/MouseCursor-class.html

Widget build(BuildContext context) {
  return Center(
    child: MouseRegion(
      cursor: SystemMouseCursors.text,
      child: Container(
        width: 200,
        height: 100,
        decoration: BoxDecoration(
          color: Colors.blue,
          border: Border.all(color: Colors.yellow),
        ),
      ),
    ),
  );
}

这里是 https://api.flutter.dev/flutter/material/MaterialStateMouseCursor-class.html官方文档中的另一个精彩示例“......定义了一个鼠标光标，当其小部件被禁用时解析为 SystemMouseCursors.forbidden。”