Flutter 鼠标样式、MouseRegion组件

Flutter中可以通过使用 MouseRegion 组件来更改鼠标光标样式。MouseRegion可以接收一个cursor参数，用于指定要使用的光标类型

目录

效果：鼠标移入显示为手指

MouseRegion 组件

鼠标光标类型

示例代码

---

效果：鼠标移入显示为手指

MouseRegion 组件

MouseRegion是一个用于响应鼠标事件并可以显示鼠标光标的组件，以下常用属性

• onEnter: 当鼠标光标进入小部件区域时调用的回调函数。
• onExit: 当鼠标光标离开小部件区域时调用的回调函数。
• onHover: 当鼠标光标在小部件区域内移动时调用的回调函数。
• cursor: 定义在小部件区域内鼠标光标的样式，通常使用SystemMouseCursors中的常量来指定。

鼠标光标类型

// cursor: SystemMouseCursors.none, // 没有光标
// cursor: SystemMouseCursors.basic, // 箭头光标，默认
cursor: SystemMouseCursors.click, // 手指
// cursor: SystemMouseCursors.forbidden, // 禁止
// cursor: SystemMouseCursors.wait, // 加载光标
// cursor: SystemMouseCursors.progress,
// cursor: SystemMouseCursors.contextMenu,
// cursor: SystemMouseCursors.help, // 带问号
// cursor: SystemMouseCursors.text, // 文本光标
// cursor: SystemMouseCursors.verticalText,
// cursor: SystemMouseCursors.cell,
// cursor: SystemMouseCursors.precise,
// cursor: SystemMouseCursors.move,
// cursor: SystemMouseCursors.grab,
// cursor: SystemMouseCursors.grabbing,
// cursor: SystemMouseCursors.noDrop,
// cursor: SystemMouseCursors.alias,
// cursor: SystemMouseCursors.copy,
// cursor: SystemMouseCursors.disappearing,
// cursor: SystemMouseCursors.allScroll,
// cursor: SystemMouseCursors.resizeLeftRight,
// cursor: SystemMouseCursors.resizeUpDown,
// cursor: SystemMouseCursors.resizeUpLeftDownRight,
// cursor: SystemMouseCursors.resizeUpRightDownLeft,
// cursor: SystemMouseCursors.resizeUp,
// cursor: SystemMouseCursors.resizeDown,
// cursor: SystemMouseCursors.resizeLeft,
// cursor: SystemMouseCursors.resizeRight,
// cursor: SystemMouseCursors.resizeUpLeft,
// cursor: SystemMouseCursors.resizeUpRight,
// cursor: SystemMouseCursors.resizeDownLeft,
// cursor: SystemMouseCursors.resizeDownRight,
// cursor: SystemMouseCursors.resizeColumn,
// cursor: SystemMouseCursors.resizeRow,
// cursor: SystemMouseCursors.zoomIn,
// cursor: SystemMouseCursors.zoomOut,

示例代码

import 'package:flutter/material.dart';

class MyMouseRegion extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: [
        MouseRegion(
          cursor: SystemMouseCursors.click, // 手指光标
          child: Container(
            width: 150,
            height: 150,
            color: Colors.black,
            margin: EdgeInsets.all(10),
            child: const Text("演示盒子区域",
              style: TextStyle(
                color: Colors.white,
                decoration: TextDecoration.none,
                fontSize: 16
              )
            ),
          ),
          onEnter: (event) {
            print("鼠标进入区域");
          },
          onExit: (event) {
            print("鼠标离开区域");
          },
          onHover: (event) {
            print("鼠标区域内移动 (${event.position.dx}, ${event.position.dy}).");
          },
        )
      ],
    );
  }
}