MouseRegion介绍
在咱们进行h5开发的时候，咱们都晓得css有一个hover来扭转元素的款式，那么咱们在Flutter中也能够通过MouseRegion是监听区域内鼠标的进入和退出以及挪动轨迹。
视频教程地址
手势系列视频教程地址
什么状况下应用MouseRegion?
MouseRegion罕用于Flutter的Web开发或者桌面程序中，当咱们鼠标须要对某个组件进入或者退出时须要减少一些特定的性能，那咱们就须要用到MouseRegion。
MouseRegion的构造函数
const MouseRegion({ Key? key, this.onEnter, this.onExit, this.onHover, this.cursor = MouseCursor.defer, this.opaque = true, this.child,}) : assert(cursor != null),assert(opaque != null),super(key: key);MouseRegion的属性和阐明
总共6个属性
| 字段 | 属性 | 形容 |
|---|---|---|
| onEnter | PointerEnterEventListener | 鼠标进入区域时的回调 |
| onExit | PointerHoverEventListener | 鼠标退出区域时的回调 |
| onHover | PointerExitEventListener | 鼠标在区域内挪动时的回调 |
| cursor | MouseCursor | 鼠标悬停区域时的光标款式 |
| opaque | bool | 是否阻止检测鼠标 |
| child | Widget | 子组件 |
MouseRegion的根本应用
咱们通过MouseRegion来包裹了一个子组件Container，当鼠标进行时就会走onEnter的回调并扭转其色彩为绿色，挪动鼠标时就会走onHover的回调，鼠标退出Container区域时进入onExit的回调并扭转其色彩为橙色。代码如下：
import 'package:flutter/material.dart';class MouseRegionExample extends StatefulWidget { @override _MouseRegionExampleState createState() => _MouseRegionExampleState();}class _MouseRegionExampleState extends State<MouseRegionExample> { Color _color = Colors.orange; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("MouseRegion"), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ MouseRegion( onEnter: (event) { print("onEnter---$event"); setState(() { _color = Colors.green; }); }, onExit: (event) { print("onExit---$event"); setState(() { _color = Colors.orange; }); }, onHover: (event) { // print("onHover---$event"); }, // cursor: MouseCursor.uncontrolled, cursor: SystemMouseCursors.click, opaque: false, child: Container( width: 100, height: 100, color: _color, ), ), ], ) ), ); }}MouseRegion成果展现
总结
MouseRegion在专门针对于Web以及桌面应用程序监听鼠标在某个区域内的事件，包含鼠标的进入和退出以及挪动轨迹，在平时的开发中应用绝对会较少，如果在当前进行Flutter Web开发时MouseRegion咱们就会常常用到。