持续创造，加速成长！这是我参与「日新方案 10 月更文应战」的第13天，点击查看活动概况
ReorderableListView
ReorderableListView是通过长按拖动某一项到另一个方位来从头排序的列表组件。
ReorderableListView需求设置children和onReorder属性，children是子控件，onReorder是拖动完成后的回调，用法如下：
List<String> items = List.generate(40, (int i) => '$i');
ReorderableListView(
children: <Widget>[
for (String item in items)
Container(
key: ValueKey(item),
height: 100,
margin: EdgeInsets.symmetric(horizontal: 50, vertical: 10),
decoration: BoxDecoration(
color:
Colors.primaries[int.parse(item) % Colors.primaries.length],
borderRadius: BorderRadius.circular(10)),
child: Text(item,style: TextStyle(fontSize: 30),textAlign: TextAlign.center,),
)
],
onReorder: (int oldIndex, int newIndex) {
if (oldIndex < newIndex) {
newIndex -= 1;
}
var child = items.removeAt(oldIndex);
items.insert(newIndex, child);
setState(() {
});
},
)
长安子视图拖动作用:
ReorderableListView的每个子控件必须设置仅有的key，ReorderableListView没有“懒加载”模式，需求一次构建一切的子组件，所以ReorderableListView并不适合加载大量数据的列表，它适用于有限调集且需求排序的状况，比方手机系统里边设置言语的功用，通过拖动对言语排序。
onReorder是拖动完成的回调，第一个参数是旧的数据索引，第二个参数是拖动到方位的索引，回调里边需求对数据进行排序并通过setState改写数据。
header参数显示在列表的顶部，用法如下：
ReorderableListView(
header: Text(
'一枚有情绪的程序员',
style: TextStyle(color: Colors.red,fontSize: 20),
textAlign: TextAlign.center,
),
...
)
运转作用：
reverse`参数设置为true且ReorderableListView的滚动方向为笔直时，滚动条直接滑动到底部，如果是水平方向则滚动条直接滑动到右边，默以为false，用法如下：
ReorderableListView(
reverse: true,
...
)
运转作用：
scrollDirection`参数表示滚动到方向，默以为笔直，设置为水平方向如下：
ReorderableListView(
scrollDirection: Axis.horizontal,
...
)
运转作用：
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触发拖动的方法是按下。
总结：
本篇主要介绍了ReorderableListView拖动排序组件和Draggable拖动组件以及一些相关的子类，基础的构造参数和运用方法。
