最近忙于学习flutter，但急功近利并非好事，还是要把所学内容进行阶段性的总结，以便于自己有更深刻的理解。正好最近看到Draggable，所以写了几个Demo并结合本文对Draggable应用和总结。
组件简介：
了解flutter的都知道，flutter是通过Widget进行布局描述的。也就是说用Draggable描述的组件（即Draggable的child）就是可以拖拽的，了解到这一点我们就知道要实现组件的拖拽功能有多么简单。拖动我们知道了,那如何接收数据呢，这就用到了DragTarget组件，Draggable拖拽经过DragTarget时会传递数据data。Draggable和DragTarget即可分开使用，也可组合使用，本篇主要通过分开使用分别讲解Draggable和DragTarget的参数和回调。
Draggable和DragTarget的组合实例请看：
《Flutter初探--可拖拽排序的九宫格》
《Git源码》
组件参数：
Draggable组件
data: 自己持有的数据，也是经过DragTarget组件会传递的数据
child: 描述的可拖动的组件
feedback: 拖动中的组件
onDragStarted: 开始拖动的回调
childWhenDragging: 拖动后原位置显示的组件
onDraggableCanceled: 拖动后未被接收的回调
onDragCompleted: 拖动且成功被接收后的回调
DragTarget组件
builder:展示的组件
onWillAccept: Draggable经过时调用，此处可以自行判断，返回true时才会调用onAccept
onAccept: onWillAccept返回true，松手时调用
onLeave: Draggable经过且离开后调用
演示图例：
1 下午6.50.27.gif
回调顺序：
由上图可以看出拖拽顺序为：
北 ==> 西 未接收
北 ==> 北 接收
南 ==> 南 接收
打印全部回调顺序日志为：
flutter: === onDragStarted
flutter: === onWillAccept: 北==>西
flutter: === onLeave: 北==>西
flutter: === onDraggableCanceled
flutter: === onDragStarted
flutter: === onWillAccept: 北==>北
flutter: === onAccept: 北==>北
flutter: === onDragCompleted
flutter: === onDragStarted
flutter: === onWillAccept: 南==>南
flutter: === onAccept: 南==>南
flutter: === onDragCompleted
接收失败回调顺序：
北 ==> 西 开始 ==> 若不接收 ==> onLeave ==> 接收失败
flutter: === onDragStarted
flutter: === onWillAccept: 北==>西
flutter: === onLeave: 北==>西
flutter: === onDraggableCanceled
接收成功回调顺序：
北 ==> 北 开始 ==> 若接收 ==> onAccept ==> 接收成功
flutter: === onDragStarted
flutter: === onWillAccept: 北==>北
flutter: === onAccept: 北==>北
flutter: === onDragCompleted
注意：Draggable与DragTarget组合使用时，执行步骤略有不同，可以看《Flutter初探--Draggable基础篇》进行对比。
功能分析：
1.中间块可以拖拽
2.拖拽后原位置变成白色块
3.移动中的块变大且透明
4.按指示方向移动到接收块后颜色交换，且原可拖动组件显示随机方向
5.未按指示方向移动无改变
代码解析：
经过上面的参数介绍和回调顺序分析，相信大家一定可以根据功能分析看懂代码实现，此处不作过多赘述。
拖拽块：
Draggable(
data: data,// 要传递的数据
child: baseItem(data, true),// 要拖动的组件
feedback: Container(// 移动中的组件
width: 100,
height: 100,
color: data.color.withOpacity(0.8),
child: Center(
child: Text('移.动.中',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white,decoration: TextDecoration.none)),
),
),
childWhenDragging: Container(// 拖动后原位置组件
width: 80,
height: 80,
color: Colors.white),
onDragStarted: () {// 开始拖动回调
print('=== onDragStarted');
},
// 接收失败回调
onDraggableCanceled: (Velocity velocity, Offset offset) {
print('=== onDraggableCanceled');
},
onDragCompleted: () {// 接收成功回调
print('=== onDragCompleted');
})
1.实现中间块可拖动只需在要拖动的组件外套一层Draggable组件
2.拖拽后原位置变成白色块只需设置Draggable的childWhenDragging
3.移动中的块变大且透明设置Draggable的feedback即可
接收块代码
DragTarget(
//展示的组件
builder: (context, candidateData, rejectedData) {
return baseItem(data, false);
},
//返回是否接收 参数为Draggable的data 方向相同则允许接收
onWillAccept: (DataBean acceptData) {
print('=== onWillAccept: ' + acceptData.title + '==>' + data.title);
return acceptData.title.compareTo(data.title) == 0;
},
onAccept: (DataBean acceptData) {//接收方法
print('=== onAccept: ' + acceptData.title + '==>' + data.title);
setState(() {//修改数据进行重绘
// 交换颜色 并生成随机方向
var index = _targerDatas.indexOf(data);
var tmpColor = data.color;
data.color = acceptData.color;
_targerDatas.remove(data);
_targerDatas.insert(index, data);
_dragData.title = randomTitle();
_dragData.color = tmpColor;
});
},
onLeave: (DataBean acceptData) {// 经过然后离开回调
print('=== onLeave: ' + acceptData.title + '==>' + data.title);
})
4.按指示方向移动到接收块后颜色交换，且原可拖动组件显示随机方向
首先要在onWillAccept回调中判断方向是否相同，返回ture则在onAccept中接收回调，调用setState()重绘
5.不接收离开调用onLeave
其中有两点需要注意：
1.Text拖动的时候默认会有两条下划线，需要设置TextStyle的decoration为
TextDecoration.none
2.生成随机数的方法
String randomTitle() {
int i = Random().nextInt(_targerDatas.length);
return _targerDatas[i].title;
}
结语：
本文主要通过一个简单实例对Draggable和DragTarget进行分开说明，对我而言是一次知识的总结，若有遗漏，后续会进行补充。由于担心篇幅太长，这里只粘出了核心代码，完整代码请查看《Git源码》。祝大家学习愉快天天进步!
网友评论