如何在不重建的情况下更改鼠标光标

Question

在 flutter 中，要更改鼠标光标，我们必须使用 MouseRegion 和 setState：

MouseRegion(cursor: _cursor);

setState(() {
    _cursor = SystemMouseCursors.grab;
});

但是，

setState

正在重建小部件。重建所有用于更改光标的小部件（这与我的用户界面无关，它是系统鼠标光标）听起来很疯狂。在我当前的应用程序中，每次鼠标移动时更改光标都会触发重建，因此它在视觉上会闪烁！例如，我有一个重新加载数据的表！

我正在寻找另一种方法来处理这个问题。我尝试使用

MouseTracker

，但我们无法再访问

MouseAnnotation

：https://docs.flutter.dev/release/writing-changes/mouse-tracker-no-longer-attaches-annotations

所以，我不知道如何通过重建来跟踪和更改鼠标光标。你呢？

Answer 1

您根本不需要 setState，请将其删除。

要使光标在悬停在某个楔形上方时发生变化，只需使用 MouseRegion 扭曲它并更改光标即可。

举个例子：

Widget build(BuildContext context) {
return Scaffold(
  body: Center(
    child: MouseRegion(
      cursor: SystemMouseCursors.grab, // Change cursor when hovering
      child: Container(
        width: 200,
        height: 200,
        color: Colors.blue,
        child: const Center(
          child: Text(
            'Hover over me!',
            style: TextStyle(
              color: Colors.white,
              fontSize: 24,
            ),
          ),
        ),
      ),
    ),
  ),
);

}

Answer 2

我使用 Stack，并以这种方式使用属性

MouseRegion.opaque

。我使用堆栈将鼠标区域放在 z 顺序的顶部，因此当它重建时，不会重建任何其他内容：

return Stack(
      children: [
        _buildContent(),
        ValueListenableBuilder(
            valueListenable: _mouseCursor,
            builder: (context, value, child) {
              return MouseRegion(
                opaque: false,
                cursor: value,
                onHover: _onMouseMove,
              );
            }),
      ],
    );

哪里

_mouseCursor

是触发刷新的 V

alueNotifier<MouseCursor>

。