时间戳

首页 > 解决方案 > Flutter - 多个手势，无需抬起手指

android - Flutter - 多个手势，无需抬起手指

问题描述

我正在尝试创建以下效果：当用户在空白屏幕上长按时，会出现一个矩形。在不抬起手指的情况下，我希望用户能够拖动矩形的边缘之一（例如，垂直）。

我可以分别实现这些效果（长按、释放、拖动），但我需要在不抬起手指的情况下拥有它们。

目前，我的代码如下所示：

 @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanStart: startDrag,
      onPanUpdate: onDrag,
      onPanEnd: endDrag,
      child: CustomPaint(
        painter: BoxPainter(
          color: BOX_COLOR,
          boxPosition: boxPosition,
          boxPositionOnStart: boxPositionOnStart ?? boxPosition,
          touchPoint: point,
        ),
        child: Container(),
      ),
    );
  }

这样就实现了边缘的拖动，基于本教程。

为了使元素出现在长按上，我使用了一个Opacity小部件。

@override
  Widget build(BuildContext context) {
    return new GestureDetector(
      onLongPress: () {
        setState(() {
          this.opacity = 1.0;
        });
      },
      child: new Container(
        width: width,
        height: height,
        child: new Opacity(
          opacity: opacity,
          child: PhysicsBox(
            boxPosition: 0.5,
          ),
        ),
      ),
    );
  }

标签： androidiosdartfluttergesture

解决方案

如果有人仍然感兴趣，我可以使用DelayedMultiDragGestureRecognizer该类实现所需的行为。

代码如下所示：

  void onDrag(details) {
    // Called on drag update
  }

  void onEndDrag(details) {
    // Called on drag end
  }

  @override
  Widget build(BuildContext context) {
    return new RawGestureDetector(
      gestures: <Type, GestureRecognizerFactory>{
        DelayedMultiDragGestureRecognizer:
            new GestureRecognizerFactoryWithHandlers<
                DelayedMultiDragGestureRecognizer>(
          () => new DelayedMultiDragGestureRecognizer(),
          (DelayedMultiDragGestureRecognizer instance) {
            instance
              ..onStart = (Offset offset) {
                /* More code here */
                return new ItemDrag(onDrag, endDrag);
              };
          },
        ),
      },
    );
  }

ItemDrag是一个扩展 Flutter 类的Drag类：

class ItemDrag extends Drag {
  final GestureDragUpdateCallback onUpdate;
  final GestureDragEndCallback onEnd;

  ItemDrag(this.onUpdate, this.onEnd);

  @override
  void update(DragUpdateDetails details) {
    super.update(details);
    onUpdate(details);
  }

  @override
  void end(DragEndDetails details) {
    super.end(details);
    onEnd(details);
  }
}

推荐阅读