Flutter 鼠标样式、MouseRegion组件-Toy模板网

这篇具有很好参考价值的文章主要介绍了Flutter 鼠标样式、MouseRegion组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

MouseRegion 组件

鼠标光标类型

示例代码

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

Flutter 鼠标样式、MouseRegion组件,Flutter,flutter,前端,windows

MouseRegion 组件

MouseRegion是一个用于响应鼠标事件并可以显示鼠标光标的组件，以下常用属性文章来源地址https://www.toymoban.com/news/detail-584884.html

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}).");
          },
        )
      ],
    );
  }
}

到了这里，关于Flutter 鼠标样式、MouseRegion组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！