Flutter 移入组件的事件监听

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