Flutter手势检测插件positioned_tap_detector_2的使用

Flutter widget允许接收点击回调，并附带点击位置。它支持 onTap、onDoubleTap 和 onLongPress 手势。每个回调函数都带有一个 TapPosition 对象，该对象提供了全局和相对触摸位置。要调整双击之间允许的最大时间延迟，可以指定一个额外的 doubleTapDelay 参数：

PositionedTapDetector(
  onTap: (position) => _printTap('Single tap', position),
  onDoubleTap: (position) => _printTap('Double tap', position),
  onLongPress: (position) => _printTap('Long press', position),
  doubleTapDelay: Duration(milliseconds: 500),
  child: ...,
)

void _printTap(String gesture, TapPosition position) => 
    print('$gesture: ${position.global}, ${position.relative ?? '-'}');

控制器

如果你需要在 widget 树中包装另一个 GestureDetector，可以传递一个额外的 PositionedTapController 参数，并在其相关手势发生时调用其回调方法：

final _controller = PositionedTapController();

Widget build(BuildContext context) {
  // ...
    child: PositionedTapDetector2(
      // ...
      controller: _controller,
      child: GestureDetector(
        onTap: _handleTap,
        onTapDown: _controller.onTapDown,
        onLongPress: _controller.onLongPress,
        behavior: ...,
        child: ...,
      ),
    ),
}

void _handleTap() {
  // ...
  _controller.onTap();
}

缺点

如果在 PositionedTapDetector2 下方的 widget 树中有另一个 GestureDetector 并且也指定了 onDoubleTap 参数，则 PositionedTapDetector2 将不会调用 onDoubleTap 回调。由于 Flutter 框架在检测到双击时不会调用其 onTapDown 回调，因此 positioned detector 无法接收到点击位置并因此无法检测双击手势。

示例代码

以下是完整的示例代码：

import 'package:flutter/material.dart';
import 'package:positioned_tap_detector_2/positioned_tap_detector_2.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => new MyAppState();
}

class MyAppState extends State<MyApp> {
  String _gesture = "";
  TapPosition _position = TapPosition(Offset.zero, Offset.zero);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              PositionedTapDetector2(
                onTap: _onTap,
                onDoubleTap: _onDoubleTap,
                onLongPress: _onLongPress,
                child: Container(
                  width: 160.0,
                  height: 160.0,
                  color: Colors.redAccent,
                ),
              ),
              Padding(
                padding: EdgeInsets.only(top: 16.0),
                child: Text("Gesture: $_gesture\n"
                    "Global: ${_formatOffset(_position.global)}\n"
                    "Relative: ${_formatOffset(_position.relative!)}"),
              ),
            ],
          ),
        ),
      ),
    );
  }

  void _onTap(TapPosition position) => _updateState('single tap', position);

  void _onDoubleTap(TapPosition position) =>
      _updateState('double tap', position);

  void _onLongPress(TapPosition position) =>
      _updateState('long press', position);

  void _updateState(String gesture, TapPosition position) {
    setState(() {
      _gesture = gesture;
      _position = position;
    });
  }

  String _formatOffset(Offset offset) =>
      "${offset.dx.toStringAsFixed(1)}, ${offset.dy.toStringAsFixed(1)}";
}