FlutterWeb：鼠标悬停>将光标更改为指针

发布于06月18日

UPDATE (2021/05/11):个

Flatter现在本机已经实现了悬停事件小部件.

对于RaisedButton等小部件和hoverColor或hoverElevation等属性，有一个MouseCursor.

https://api.flutter.dev/flutter/rendering/MouseCursor-class.html个

你也可以在其他任何地方使用墨水池，就像接受的答案中所说的那样.

Original Question:个

How can the cursor appearance be changed within Flutter? I know that with the 100 Widget we can listen for Mouse-Events, but I haven't found any information regarding hovering events for flutter web. Has someone found a soulution yet?

推荐答案

我很难找到关于现在内置支持的文档.这是对我有帮助的: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.forted."