Flutter区域检测插件region_detector的使用

Region Detector

监听用户在应用特定区域内的点击和拖动事件。当拖动进入由RegionDetector小部件封装的区域时，会触发一个回调。当指针（用户手指）离开RegionDetector时也会触发回调。

特性

所有RegionDetector小部件都可以触发回调：onFocused和onFocusLoss。

• FocusArea：此小部件提供了一个监听器来监听指针的按下和抬起事件，并在指针进入某个RegionDetector小部件的区域时触发回调。该小部件必须是RegionDetector的祖先。

• onPointerDown：此回调可以在FocusArea小部件上设置，用于在指针按下后调用。

• onPointerUp：此回调也可以在FocusArea小部件上设置，用于在指针抬起后调用。

• RegionDetector：此小部件用于包装需要监控触摸事件的目标子小部件，并且必须是FocusArea的一个子小部件。它将被包装的小部件区域转换为回调监听器。

• onFocused：这是附加到RegionDetector的回调函数参数，在指针进入此小部件的区域时（指针按下或在区域内按下）触发一次。

• onFocusLoss：这是附加到RegionDetector的回调函数参数，在指针离开此小部件的区域时（指针抬起或在区域内抬起）触发一次。

开始使用

添加依赖

在项目的pubspec.yaml文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter

  ...
  region_detector: [latest_version]

导入库

在目标dart文件中添加导入语句：

import 'package:region_detector/region_detector.dart';

使用示例

检查/example文件夹中的项目以获得更多细节。

如前所述，FocusArea必须是RegionDetector小部件的祖先，如下所示：

Color color1 = Colors.amber;
Color color2 = Colors.amber;
Color color3 = Colors.amber;
Color color4 = Colors.amber;

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    body: Container(
      child: FocusArea(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            RegionDetector(
              onFocused: () {
                setState(() {
                  color1 = Colors.pinkAccent;
                });
              },
              onFocusLoss: () {
                setState(() {
                  color1 = Colors.amber;
                });
              },
              child: Container(
                key: Key('con1'),
                height: 100,
                width: 100,
                color: color1,
              ),
            ),
            RegionDetector(
              onFocused: () {
                setState(() {
                  color2 = Colors.pinkAccent;
                });
              },
              onFocusLoss: () {
                setState(() {
                  color2 = Colors.amber;
                });
              },
              child: Container(
                key: Key('con2'),
                height: 100,
                width: 100,
                color: color2,
              ),
            ),
            RegionDetector(
              onFocused: () {
                setState(() {
                  color3 = Colors.pinkAccent;
                });
              },
              child: Container(
                key: Key('con3'),
                height: 100,
                width: 100,
                color: color3,
              ),
            ),
            RegionDetector(
              onFocused: () {
                setState(() {
                  color4 = Colors.pinkAccent;
                });
              },
              onFocusLoss: () {
                setState(() {
                  color4 = Colors.amber;
                });
              },
              child: Container(
                key: Key('con4'),
                height: 100,
                width: 100,
                color: color4,
              ),
            ),
          ],
        ),
      ),
    ),
  );
}