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效果展示
image
总结
MouseRegion在专门针对于Web以及桌面应用程序监听鼠标在某个区域内的事件，包括鼠标的进入和退出以及移动轨迹，在平时的开发中使用相对会较少，如果在以后进行Flutter Web开发时MouseRegion我们就会经常用到。
