持续创造,加速成长!这是我参与「日新方案 10 月更文应战」的第13天,点击查看活动概况

ReorderableListView

ReorderableListView是通过长按拖动某一项到另一个方位来从头排序的列表组件。

ReorderableListView需求设置childrenonReorder属性,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(() {
        });
      },
    )

长安子视图拖动作用:

13、 Flutter Widgets 之 ReorderableListView和Draggable拖拽排序与拖动组件

ReorderableListView的每个子控件必须设置仅有的key,ReorderableListView没有“懒加载”模式,需求一次构建一切的子组件,所以ReorderableListView并不适合加载大量数据的列表,它适用于有限调集且需求排序的状况,比方手机系统里边设置言语的功用,通过拖动对言语排序。

onReorder是拖动完成的回调,第一个参数是旧的数据索引,第二个参数是拖动到方位的索引,回调里边需求对数据进行排序并通过setState改写数据。

header参数显示在列表的顶部,用法如下:

ReorderableListView(
        header: Text(
          '一枚有情绪的程序员',
          style: TextStyle(color: Colors.red,fontSize: 20),
          textAlign: TextAlign.center,
        ),
...
)

运转作用:

13、 Flutter Widgets 之 ReorderableListView和Draggable拖拽排序与拖动组件

reverse`参数设置为true且ReorderableListView的滚动方向为笔直时,滚动条直接滑动到底部,如果是水平方向则滚动条直接滑动到右边,默以为false,用法如下:

ReorderableListView(
  reverse: true,
  ...
)

运转作用:

13、 Flutter Widgets 之 ReorderableListView和Draggable拖拽排序与拖动组件

scrollDirection`参数表示滚动到方向,默以为笔直,设置为水平方向如下:

ReorderableListView(
  scrollDirection: Axis.horizontal,
  ...
)

运转作用:

13、 Flutter Widgets 之 ReorderableListView和Draggable拖拽排序与拖动组件

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

运转作用:

13、 Flutter Widgets 之 ReorderableListView和Draggable拖拽排序与拖动组件

蓝色的组件是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),
        ),
      ),

13、 Flutter Widgets 之 ReorderableListView和Draggable拖拽排序与拖动组件

咱们还能够操控拖动的方向,比方只允许笔直方向移动,代码如下:

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拖动组件以及一些相关的子类,基础的构造参数和运用方法。