Flutter Draggable and DragTarget拖拽控件

本文主要介绍Flutter的Draggable和DragTarget，是一个能够在屏幕上拖动的Widget。

Draggable

构造函数

Draggable(
  data: 4,
	///控制widget在拖动时，只能横向
  //axis: Axis.horizontal,
	///中止的时候，显示的widget(默认显示)
  child:
	///正在拖动时，显示的widget(拖动的手指处显示的widget)
  feedback:
 	///拖动的时候，在原始位置展现的widget
  childWhenDragging: 
),
复制代码

child默认显示的widget；

feedback拖动时，手指位置显示的widget

childWhenDraggingchild拖走后，原位置显示的widget

其中axis控制拖拽的方向

axis: Axis.horizontal,

Callback

///开始拖拽
onDragStarted: () {
  print("----onDragStarted,开始拖拽");
},
///拖拽到DragTarget且接受的时候回调
onDragCompleted: () {
  print("----onDragCompleted,拖拽完成");
},
///没有拖拽到DragTarget或拖拽没有完成的回调
onDraggableCanceled: (v, offset) {
  print("----onDraggableCanceled,拖拽取消");
},
复制代码

onDragStarted开始拖拽的时候的回调

onDragCompleted拖拽到Target且被接受时的回调

onDraggableCancled没有拖拽到Target或Target没有接受时的回调

DragTarget

构造函数

DragTarget(
  builder: (context, List<int> candidateData,
      List<dynamic> rejectedData) {
    ///candidateData，当Draggable被拖到DragTarget上的时候的data，已经准备好接受
    print("----candidateData" + candidateData.toString());

    ///rejectData，当Draggable被拖到DragTarget上的时候，不被接受
    print("----rejectedData" + rejectedData.toString());

    ///这两个数据都是正拖到上面的时候，还没放到上面，还没松手
    return Center(
      child: Text(candidateData.toString() +
          "----" +
          rejectedData.toString()),
    );
  },
),
复制代码

builder DragTarget的Widget构造函数，用于建立DragTarget显示的Widget

Callback

///接收Draggable的data数据，判断是否接收
  onWillAccept: (data) {
    print("----onWillAccept,拖拽" + data.toString() + "到target");
    if (data == 4) {
      return true;
    } else {
      return false;
    }
  },

  ///当拖到DragTarget的时候，松手后
  onAccept: (data) {
    print("----onAccept,接收" + data.toString());
    scaffoldKey.currentState
        .showSnackBar(SnackBar(content: Text(data.toString())));
  },

  ///拖到上面，没有松手，又离开
  onLeave: (data) {
    print("----onLeave,离开" + data.toString());
  },
复制代码

onWillAccept预判是否会接受这个Draggable

onAccept接受Draggable的回调

onLeaveDraggable拖拽到上可是没有松开，直接离开的回调

github地址：

github.com/damengzai/f…

微信公众号“Flutter入门”