在 Flutter 中不使用 MouseRegion 显式更改 Cursor

Question

是否可以在不使用 MouseRegion 的情况下更改 windows 和网络应用程序中光标的外观？我目前有一个自定义小部件，它使用 CustomPainter 在 canvas 上绘制多个形状，并使用 MouseRegion 监听鼠标事件 (enter/exit) 以确定鼠标悬停在哪些形状上。我的问题是，如果我使用鼠标区域来包裹 CustomPainter，即使用户不在 canvas 上的形状上而是悬停在形状之间的 space 上，它也会更改光标。

有没有一种方法可以明确地告诉 flutter 在我需要的时候将光标更改为某些东西，例如 Mouse.of(context) = SystemMouseCursor.text?

Answer 1

您可以尝试这样的操作，您只需将整个视图包裹在 MouseRegion 中，然后使用 setState 更改光标：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; // <----

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {

  SystemMouseCursor cursor = SystemMouseCursors.zoomIn; // <----

  @override
  Widget build(BuildContext context) {
    return MouseRegion( // <----
        cursor: cursor, // <----
        child: Scaffold(
          body: Center(
            child: TextButton(onPressed: () {
              cursor = SystemMouseCursors.grab; // <----
              setState(() {});                  // <----
            }, child: const Text("Change Cursor")),
          ),
        ),
      );
  }
}

希望对您有所帮助

Answer 2

Stack 小部件可以帮助您。它可以和未对齐的一样大 child，因此如果您不希望整个形状都在其中，则可以使用堆栈并用鼠标区域填充边框（例如正方形）：

Stack(
  children: [
    const SizedBox.square(dimension: 50), //Unpositioned child
    
    //Four sides
    Positioned(
      left: 0,
      top: 3,
      bottom: 3,
      child: GestureDetector(
        onScaleUpdate: (details) => debugPrint(details.toString()),
        child: const MouseRegion(
          cursor: SystemMouseCursors.resizeLeftRight,
          child: SizedBox(width: 3),
        ),
      ),
    ),
    Positioned(
      right: 0,
      top: 3,
      bottom: 3,
      child: GestureDetector(
        onScaleUpdate: (details) => debugPrint(details.toString()),
        child: const MouseRegion(
          cursor: SystemMouseCursors.resizeLeftRight,
          child: SizedBox(width: 3),
        ),
      ),
    ),
    Positioned(
      top: 0,
      right: 3,
      left: 3,
      child: GestureDetector(
        onScaleUpdate: (details) => debugPrint(details.toString()),
        child: const MouseRegion(
          cursor: SystemMouseCursors.resizeUpDown,
          child: SizedBox(height: 3),
        ),
      ),
    ),
    Positioned(
      bottom: 0,
      right: 3,
      left: 3,
      child: GestureDetector(
        onScaleUpdate: (details) => debugPrint(details.toString()),
        child: const MouseRegion(
          cursor: SystemMouseCursors.resizeUpDown,
          child: SizedBox(height: 3),
        ),
      ),
    ),

    //Four corners
    Positioned(
      left: 0,
      top: 0,
      child: GestureDetector(
        onScaleUpdate: (details) => debugPrint(details.toString()),
        child: const MouseRegion(
          cursor: SystemMouseCursors.resizeUpLeft,
          child: SizedBox.square(dimension: 3),
        ),
      ),
    ),
    Positioned(
      right: 0,
      top: 0,
      child: GestureDetector(
        onScaleUpdate: (details) => debugPrint(details.toString()),
        child: const MouseRegion(
          cursor: SystemMouseCursors.resizeUpRight,
          child: SizedBox.square(dimension: 3),
        ),
      ),
    ),
    Positioned(
      bottom: 0,
      left: 0,
      child: GestureDetector(
        onScaleUpdate: (details) => debugPrint(details.toString()),
        child: const MouseRegion(
          cursor: SystemMouseCursors.resizeDownLeft,
          child: SizedBox.square(dimension: 3),
        ),
      ),
    ),
    Positioned(
      bottom: 0,
      right: 0,
      child: GestureDetector(
        onScaleUpdate: (details) => debugPrint(details.toString()),
        child: const MouseRegion(
          cursor: SystemMouseCursors.resizeDownRight,
          child: SizedBox.square(dimension: 3),
        ),
      ),
    ),
  ],
)

在 Flutter 中不使用 MouseRegion 显式更改 Cursor

Change the Cursor explictly without MouseRegion in Flutter

flutter

flutter-web

flutter-windows