Flutter（87）：Draggable组件之LongPressDraggable

Flutter教学目录持续更新中

Github源代码持续更新中

1.LongPressDraggable介绍

长按拖拽组件，跟Draggable几乎一样，但是需要长按才能拖拽

2.LongPressDraggable属性

• child：子组件，未进行拖拽时显示
• feedback：跟随拖拽的组件
• data：用于对DragTarget传递data
• axis：Axis 拖拽方向，可以设置只能横向或者纵向拖拽
• childWhenDragging：拖拽时child子组件显示样式
• feedbackOffset = Offset.zero：
• dragAnchor = DragAnchor.child：拖拽的锚地位置
• ignoringFeedbackSemantics = true：当子child和feedback为同一个Widget时，可以设为false配合GlobalKey确保是同一个Widget 减少绘制
• affinity：此部件与其它手势的竞争方式 在非affinity方向上不响应拖动事件,一般用于在滚动组件
• maxSimultaneousDrags：同时支持拖动多少个点
• onDragStarted：拖动开始时调用
• onDraggableCanceled：在没有被DragTarget接受的情况下松开draggable时调用
• onDragEnd：拖动结束时调用
• onDragCompleted：Draggable被删除并被DragTarget接受时调用

3.使用

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('LongPressDraggable'),
      ),
      body: Center(
        child: LongPressDraggable(
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
          feedback: Container(
            color: Colors.red,
            width: 100,
            height: 100,
          ),
          childWhenDragging: Container(
            color: Colors.amber,
            width: 100,
            height: 100,
          ),
          feedbackOffset: Offset(0, 10),
          dragAnchor: DragAnchor.child,
          onDragStarted: () {
            print("onDragStarted");
          },
          onDragEnd: (DraggableDetails details) {
            print("onDragEnd : $details");
          },
          onDraggableCanceled: (Velocity velocity, Offset offset) {
            print('onDraggableCanceled velocity:$velocity,offset:$offset');
          },
          onDragCompleted: () {
            print('onDragCompleted');
          },
        ),
      ),
    );
  }

image.png

Flutter教学目录持续更新中

Github源代码持续更新中