Flutter 拖拽控件Draggable看这一篇就够了_app

概述注意：无特殊说明，Flutter版本及Dart版本如下： Flutter版本： 1.12.13+hotfix.5 Dart版本： 2.7.0 Draggable系列组件可以让我们拖动组件。 Dragg

注意：无特殊说明，Flutter版本及Dart版本如下：
Flutter版本： 1.12.13+hotfix.5Dart版本： 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,decoration: Boxdecoration(        color: colors.blue,)

效果如下：

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

Draggable(  chilDWhenDragging: Container(    height: 100,decoration: Boxdecoration(        color: colors.grey,borderRadius: borderRadius.circular(10)),child: Text(      '孟',...)

效果如下：

我们还可以控制拖动的方向，比如只允许垂直方向移动，代码如下：

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

用法如下：

var _dragData;@overrIDeWidget build(BuildContext context) {  return Center(    child: Column(      children: <Widget>[        _buildDraggable(),SizedBox(          height: 200,DragTarget<color>(          builder: (BuildContext context,List<color> candIDateData,List<dynamic> rejectedData) {            print('candIDateData:$candIDateData,rejectedData:$rejectedData');            return _dragData == null                ? Container(                    height: 100,decoration: Boxdecoration(                        borderRadius: borderRadius.circular(10),border: border.all(color: colors.red)),)                : Container(                    height: 100,decoration: Boxdecoration(                        color: colors.red,child: Text(                      '孟',);          },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,decoration: Boxdecoration(          color: colors.red,child: Text(        '孟',Feedback: Container(      height: 100,decoration: Boxdecoration(          color: colors.blue,child: DefaultTextStyle.merge(        style: TextStyle(color: colors.white,child: Text(          '孟',);}

效果如下：

LongPressDraggable

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