本文主要介绍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地址:
微信公众号“Flutter入门”
