注意：无特殊说明，flutter版本及dart版本如下：

flutter版本： 1.12.13+hotfix.5

dart版本： 2.7.0

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: 18),),

),

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: 18),),

),

)

效果如下：

蓝色的组件是feedback，如果想在拖动的时候子组件显示其他样式可以使用childwhendragging参数，用法如下：

draggable(

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组件为我们提供了4中拖动过程中的回调事件，用法如下：

draggable(

ondragstarted: (){

print('ondragstarted');

},

ondragend: (draggabledetails details){

print('ondragend:$details');

},

ondraggablecanceled: (velocity velocity, offset offset){

print('ondraggablecanceled velocity:$velocity,offset:$offset');

},

ondragcompleted: (){

print('ondragcompleted');

},

...

)

说明如下：

ondragstarted：开始拖动时回调。

ondragend：拖动结束时回调。

ondraggablecanceled：未拖动到dragtarget控件上时回调。

ondragcompleted：拖动到dragtarget控件上时回调。

draggable有一个data参数，这个参数是和dragtarget配合使用的，当用户将控件拖动到dragtarget时此数据会传递给dragtarget。

dragtarget

dragtarget就像他的名字一样，指定一个目的地，draggable组件可以拖动到此控件，用法如下：

dragtarget(

builder: (buildcontext context, list candidatedata,

list 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时，用户松手后调用。

用法如下：

var _dragdata;

@override

widget build(buildcontext context) {

return center(

child: column(

children: [

_builddraggable(),

sizedbox(

height: 200,

),

dragtarget(

builder: (buildcontext context, list candidatedata,

list rejecteddata) {

print('candidatedata:$candidatedata,rejecteddata:$rejecteddata');

return _dragdata == null

? container(

height: 100,

width: 100,

alignment: alignment.center,

decoration: boxdecoration(

borderradius: borderradius.circular(10),

border: border.all(color: colors.red)),

)

: 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: 18),

),

);

},

onwillaccept: (color color) {

print('onwillaccept:$color');

return true;

},

onaccept: (color color) {

setstate(() {

_dragdata = color;

});

print('onaccept:$color');

},

onleave: (color color) {

print('onleave:$color');

},

),

],

),

);

}

_builddraggable() {

return draggable(

data: color(0x000000ff),

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: 18),

),

),

feedback: container(

height: 100,

width: 100,

alignment: alignment.center,

decoration: boxdecoration(

color: colors.blue, borderradius: borderradius.circular(10)),

child: defaulttextstyle.merge(

style: textstyle(color: colors.white, fontsize: 18),

child: text(

'孟',

),

),

),

);

}

效果如下：

longpressdraggable

longpressdraggable继承自draggable，因此用法和draggable完全一样，唯一的区别就是longpressdraggable触发拖动的方式是长按，而draggable触发拖动的方式是按下。

今天的文章对大家是否有帮助？如果有，请在文章底部留言和点赞，以表示对我的支持，你们的留言、点赞和转发关注是我持续更新的动力！

我创建了一个关于flutter的微信交流群，欢迎您的加入，让我们一起学习，一起进步，开始我们的故事，生活不止眼前的苟且，还有诗和《远方》。

==微信：mqd_zzy==

当然我也非常希望您关注我个人的公众号，里面有各种福利等着大家哦。

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！