Flutter

Question

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

我可以单独实现这些效果（长按、松开、拖动），但我需要在不抬起手指的情况下实现它们。

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

 @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(),
      ),
    );
  }

这里实现了边的拖动，是基于this tutorial.

为了让元素出现在长按时，我使用了一个 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,
          ),
        ),
      ),
    );
  }

Answer 1

如果有人仍然感兴趣，我可以使用 DelayedMultiDragGestureRecognizer class.

实现所需的行为

代码如下所示：

  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:

的 class

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);
  }
}

Flutter - 无需抬起手指的多个手势

Flutter - Multiple gestures without lifting the finger

android

gesture

ios

dart