【问题标题】:Flutter - Multiple gestures without lifting the fingerFlutter - 多个手势,无需抬起手指
【发布时间】:2018-06-12 19:09:08
【问题描述】:

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

我能够分别实现这些效果(长按、释放、拖动),但我需要在不抬起手指的情况下拥有它们。

目前,我的代码如下所示:

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

【问题讨论】:

    标签: android ios dart flutter gesture


    【解决方案1】:

    如果有人仍然感兴趣,我可以使用 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);
      }
    }
    

    【讨论】:

    • 我可以知道 onDrag 和 endDrag 是从哪里来的吗?
    • 谢谢,这正是我所需要的。我想知道为什么 Flutter 没有这样的开箱即用功能。
    • @KennethJohn,我为延迟道歉。代码是几年前为一个大学项目编写的,所以我真的帮不上忙,因为我记不太清了。但是,如果有用,我设法找到了其余代码:pastebin.com/bB1gAnWs
    • 知识永远丢失了!开个玩笑看看文档,您可以从以下内容开始您的工作: onDrag(DragUpdateDetails d) { print('currently ${d.localPosition}'); } endDrag(DragEndDetails d) { print('结束 $d'); }
    猜你喜欢
    • 1970-01-01
    • 2012-02-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-05-06
    • 2017-12-29
    • 1970-01-01
    相关资源
    最近更新 更多