Flutter-指针事件知识

配图来自网络，如侵必删
在Flutter开发当中，我们可能会遇到下面的需求：

定位用户手指当前处于的位置，以及点击了多少次。

遇到这种需求，我们就需要使用指针事件来帮我们实现。这篇博客分享指针事件的知识，希望对看文章的小伙伴有所帮助。

指针事件

怎么获取指针事件？这是一个很关键的问题，大概的实现思路是：

• Flutter应用中每个显示在屏幕中的页面都会被Listener组件包裹，我们首先要获取Listener组件；
• 我们通过Listener组件获取用户和屏幕交互的原始数据。

指针事件对象中存放了这个指针的位置、偏移量等用户与设备屏幕交互的原始数据信息。

Listener组件源码

  const Listener({
    Key? key,
    this.onPointerDown, // 手指按下回调
    this.onPointerMove, // 手指移动回调
    this.onPointerUp, // 手指抬起回调
    this.onPointerHover, // 悬停
    this.onPointerCancel, // 触摸事件取消回调
    this.onPointerSignal, // 
    this.behavior = HitTestBehavior.deferToChild,
    Widget? child,
  })

Listener组件API

事件API	事件描述
onPointerDown	用户按下时回调的参数
onPointerMove	用户在屏幕上移动时的回调
PointerEvent	用户抬起手指回调的对象

简单的代码示例

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Listener Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int downCounter = 0;
  int upCounter = 0;
  double x = 0.0;
  double y = 0.0;

  // 按下事件的处理方法
  void incrementDown(PointerDownEvent event) {
    updateLocation(event);
    setState(() {
      downCounter++;
    });
  }

  // 抬起事件的处理方法
  void incrementUp(PointerUpEvent event) {
    updateLocation(event);
    setState(() {
      upCounter++;
    });
  }

  // 移动事件的处理方法
  void updateLocation(PointerEvent event) {
    setState(() {
      x = event.position.dx;
      y = event.position.dy;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: ConstrainedBox(
          constraints: BoxConstraints.tight(const Size(300, 200)),
          child: Listener(
            onPointerDown: incrementDown,
            onPointerMove: updateLocation,
            onPointerUp: incrementUp,
            child: Container(
              color: Colors.redAccent,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  const Text('按下抬起的次数：'),
                  Text('按下$downCounter次，抬起$upCounter次'),
                  Text(
                      '目前点击的位置（${x.toStringAsFixed(2)},${y.toStringAsFixed(2)}）')
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

小伙伴们可以直接复制上面的代码运行。效果如下：

效果