关于flutter:Flutter-手势系列教程MouseRegion

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 个属性

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 咱们就会常常用到。