Flutter事件监听插件arena_listener的使用

GestureDetector 对你来说太高阶了吗？ 希望有一个类似于 Listener 的东西，可以与 GestureDetectors 在手势竞技场中竞争？ 那么这个包正是为你准备的！

特性

• 监听指针事件，就像一个 Listener。
• 读取指针的手势处置（接受、拒绝、未解决）。
• 尝试解决竞技场（声明胜利或承认失败），或者保持竞技场未解决。
• 当指针赢得或输掉竞技场时获得通知。

使用

import 'package:arena_listener/arena_listener.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  const App({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ArenaListener(
      onPointerDown: (PointerDownEvent event) {
        print("${event.pointer} down");
        return null;
      },
      onPointerMove: (PointerMoveEvent event, GestureDisposition? disposition) {
        print("${event.pointer} move, $disposition");
        return null;
      },
      onPointerUp: (PointerUpEvent event, GestureDisposition? disposition) {
        print("${event.pointer} up, $disposition");
        return GestureDisposition.accepted;
      },
      onPointerCancel: (PointerCancelEvent event, GestureDisposition? disposition) {
        print("${event.pointer} cancel, $disposition");
        return GestureDisposition.rejected;
      },
      onWin: (PointerEvent lastEvent) {
        print("${lastEvent.pointer} won");
      },
      onLose: (PointerEvent lastEvent) {
        print("${lastEvent.pointer} lost");
      },
      child: GestureDetector(
        onVerticalDragUpdate: (_) {},
        child: Container(
          color: Colors.grey,
        ),
      ),
    );
  }
}

注意，如果竞技场已经解决了，你返回的手势处置不会改变任何事情。只有在竞技场未解决的情况下，声明胜利或承认失败才有效。

编译并运行 example/ 文件夹中的示例以获得更直观的演示。

你也可以直接使用 RawGestureRecognizer 和 RawGestureDetector，如果 ArenaListener 不适合你的场景。查看 ArenaListener 的源码。

完整示例

以下是完整的示例代码，展示了如何使用 ArenaListener 来处理指针事件：

import 'dart:ui';

import 'package:arena_listener/arena_listener.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

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

class PointData {
  Offset offset;
  Color color;

  PointData(this.offset, this.color);
}

List<PointData> points = [];

class App extends StatefulWidget {
  const App({super.key});

  [@override](/user/override)
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  void addPoint(Offset offset, GestureDisposition? disposition) {
    Color color;
    switch (disposition) {
      case null:
        color = Colors.black;
      case GestureDisposition.accepted:
        color = Colors.red;
      case GestureDisposition.rejected:
        color = Colors.green;
    }

    setState(() {
      points.add(PointData(offset, color));
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      scrollBehavior: const MaterialScrollBehavior().copyWith(
        dragDevices: {
          PointerDeviceKind.mouse,
          PointerDeviceKind.touch,
          PointerDeviceKind.stylus,
          PointerDeviceKind.unknown
        },
      ),
      home: ArenaListener(
        onPointerDown: (event) {
          addPoint(event.localPosition, null);
          return null;
        },
        onPointerMove: (event, GestureDisposition? disposition) {
          addPoint(event.localPosition, disposition);
          return null;
        },
        onPointerUp: (event, GestureDisposition? disposition) {
          addPoint(event.localPosition, disposition);
          return GestureDisposition.accepted;
        },
        onWin: (event) {
          addPoint(event.localPosition, GestureDisposition.accepted);
        },
        onLose: (event) {
          addPoint(event.localPosition, GestureDisposition.rejected);
        },
        child: CustomPaint(
          painter: PointPainter(),
          child: ListView.builder(
            itemBuilder: (context, i) {
              return Text("$i");
            },
          ),
        ),
      ),
    );
  }
}

class PointPainter extends CustomPainter {
  [@override](/user/override)
  void paint(Canvas canvas, Size size) {
    canvas.drawPaint(Paint()..color = Colors.white);

    for (final point in points) {
      canvas.drawPoints(
        PointMode.points,
        [point.offset],
        Paint()
          ..color = point.color
          ..strokeWidth = 10,
      );
    }
  }

  [@override](/user/override)
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}