Draggable系列组件可以让我们拖动组件。
Draggable
Draggable组件有2个必须填写的参数,child
参数是子控件,feedback
参数是拖动时跟随移动的组件,用法如下:
Draggable(
child: Container(
height: 100,
width: 100,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10)
),
child: Text('璋',style: TextStyle(color: Colors.white,fontSize: 20),),
),
feedback: Container(
height: 100,
width: 100,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.circular(10)
),
child: Text('三',style: TextStyle(color: Colors.white,fontSize: 20),),
)
)
蓝色的组件是feedback
,如果想在拖动的时候子组件显示其他样式可以使用childWhenDragging
参数,用法如下:
childWhenDragging: Container(
height: 100,
width: 100,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.circular(10),
),
child: Text('王',
style: TextStyle(
color: Colors.white,
fontSize: 18),
),
),
我们还可以控制拖动的方向,比如只允许垂直方向移动,代码如下:
Draggable(
axis: Axis.vertical,
...
)
Draggable组件为我们提供了5种拖动过程中的回调事件,用法如下:
Draggable(
// axis: Axis.vertical,
child: Container(
height: 100,
width: 100,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10)
),
child: Text('璋',style: TextStyle(color: Colors.white,fontSize: 20),),
),
feedback: Container(
height: 100,
width: 100,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(10)
),
child: Text('三',style: TextStyle(color: Colors.white,fontSize: 20),),
),
childWhenDragging: Container(
height: 100,
width: 100,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.circular(10),
),
child: Text('王',
style: TextStyle(
color: Colors.white,
fontSize: 18),
),
),
onDragStarted: (){
print('onDragStarted');
},
onDragEnd: (DraggableDetails details){
print('onDragEnd:$details');
},
onDraggableCanceled: (Velocity velocity,Offset offset){
print('onDraggableCancel velocity:$velocity,offset:$offset');
},
onDragCompleted: (){
print('onDragCompleted');
},
onDragUpdate: (DragUpdateDetails details){
print('onDragUpdate');
},
)
说明如下:
-
onDragStarted:开始拖动时回调。
-
onDragEnd:拖动结束时回调。
-
onDraggableCanceled:未拖动到DragTarget控件上时回调。
-
onDragCompleted:拖动到DragTarget控件上时回调。
-
onDragUpdate:拖动过程中更新回调。
Draggable有一个data
参数,这个参数是和DragTarget配合使用的,当用户将控件拖动到DragTarget时此数据会传递给DragTarget。
DragTarget
DragTarget就像他的名字一样,指定一个目的地,Draggable组件可以拖动到此控件,
属性 说明
builder被调用来构建这个小部件的内容
Widget DragTargetBuilder (
BuildContext context,
List<T> candidateData,// 传递的数据 集合
List rejectedData // 不会被接收的数据集合
)
onWillAccept 是否接收拖动目标给定数据
onAccept 接收数据时调用
onLeave 拖动部件 离开时调用
用法如下:
DragTarget(
builder: (BuildContext context, List<dynamic> candidateData,
List<dynamic> rejectedData) {
...
}
)
当onWillAccept
返回true时, candidateData
参数的数据是Draggable的data
数据。
当onWillAccept
返回false时, rejectedData
参数的数据是Draggable的data
数据,
DragTarget有3个回调,说明如下:
-
onWillAccept:拖到该控件上时调用,需要返回true或者false,返回true,松手后会回调onAccept,否则回调onLeave。
-
onAccept:onWillAccept返回true时,用户松手后调用。
-
onLeave:onWillAccept返回false时,用户松手后调用。
用法如下:
DragTarget(
builder: (BuildContext context, List<Object?> candidateData,
List<dynamic> rejectedData) {
return Container(
alignment: Alignment.center,
height: 250,
width: 250,
color: Colors.black26,
child: Text('data'),
);
},
onAccept: (String data) {
print(data);
},
onLeave:(String data){
//数据来了 又离开了
print('onLeave : $data');
},
)
LongPressDraggable
LongPressDraggable继承自Draggable,因此用法和Draggable完全一样,唯一的区别就是LongPressDraggable触发拖动的方式是长按,而Draggable触发拖动的方式是按下。