如何更改 Flutter Desktop 光标指针？答案

【问题标题】：How to change Flutter Desktop cursor pointer?如何更改 Flutter Desktop 光标指针？
【发布时间】：2020-10-16 06:54:11
【问题描述】：

我想在悬停某个小部件时更改光标指针，但我找不到如何实现。

看着这个comment 似乎他们已经为 macOS 提供了它，但我找不到任何关于如何实现的信息。

如何在悬停小部件时更改光标？

【问题讨论】：

标签： macos flutter flutter-desktop

【解决方案1】：

MouseRegion 上有一个cursor 属性，它控制指针在区域中时显示的光标。例如：

MouseRegion(
  cursor: SystemMouseCursors.text,
  child: YourWidgetHere(),
)

【讨论】：

这是否意味着任何时候你想改变光标都需要重建所有的子小部件？
@Gerard 不一定，它可能像 AnimatedBuilder 那样没有重建孩子。但是我没有确认

【解决方案2】：

如果您想用自定义小部件替换鼠标光标，也可以关注此article。

总结：

使用 MouseRegion 隐藏实际光标，但仍使用 onHover 保存其位置
使用 Stack 和 Positioned/AnimatedPositioned 小部件将自定义光标添加到小部件顶部

// Use a stateful widget to record the cursor position
Offset position;

Widget build(BuildContext context) {
  return MouseRegion(
    cursor: SystemMouseCursors.none,
    onHover: (event) {
      setState(() {
        // Save the position of the cursor when it moves
        position = event.position; 
      });
    },
    child: Stack(
      children: [
        MyWidget(),
        AnimatedPositioned(
          duration: const Duration(milliseconds: 100),
          left: position.dx,
          top: position.dy,
          child: CustomCursor(),
        ),
      ],
    )
  ),
}

【讨论】：