专栏首页FlutterFlutter 拖拽控件Draggable看这一篇就够了
原创

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

注意:无特殊说明,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<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;



@override

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

                    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触发拖动的方式是按下。

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Flutter 拖拽排序组件 ReorderableListView

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

    老孟程序员
  • 一篇带你看懂Flutter叠加组件Stack

    Stack未定位的子组件大小由fit参数决定,默认值是StackFit.loose,表示子组件自己决定,StackFit.expand表示尽可能的大,用法如下:

    老孟程序员
  • 《Flutter 动画系列二》Google工程师带你选择Flutter动画控件

    不要急躁,开始的我和你是一样的,第一遍看完,完全不知道在说什么,不明白不要紧,请先收藏此文章,然后先去学习下Flutter内置的25种动画组件。

    老孟程序员
  • 磊哥测评之数据库:腾讯云Redis vs 自建Redis

    上期我比较了腾讯云和阿里云的MySQL数据库,文章发布之后引起了一些反响,有质疑数据的,也有希望了解更多细节的同学。其实一个数据库产品的好坏,不光是QPS、TP...

    磊哥测评
  • 磊哥测评之数据库篇:云Redis vs 自建Redis

    上期我比较了腾讯云和阿里云的MySQL数据库,文章发布之后引起了一些反响,有质疑数据的,也有希望了解更多细节的同学。其实一个数据库产品的好坏,不光是QPS、TP...

    腾讯云数据库 TencentDB
  • tomcat日志神器--kibana

    最近公司搭了套kibana的日志系统,感受比原来查看日志方便多了。记得以前查看日志是通过ssh到服务器,查看系统日志用vi查看器查看或者下载到本地,用logvi...

    编程软文
  • Eclipse myeclipse下配置HanLP的教程

    备注:文章分享自贾继康的博客,博客使用的hanlp是1.6.8的版本。大家可以去下载最新的1.7版本了,也比较推荐使用最新的这个版本!

    IT小白龙
  • gcc编译时文件扩展名为.S和.s的区别

    其实我们可以直接编写汇编代码,保存到以.s为后缀的文件里,然后再用gcc将其编译成可执行文件。

    wangyuntao
  • JSR310新日期API(五)-在主流框架中使用新日期时间类

    前面的几篇文章已经基本介绍完了JSR-310日期时间类库的基本使用,这篇文章主要介绍在主流的框架中如何使用这些类库。因为涉及到数据库操作,先准备好一张表和对应的...

    Throwable
  • 使用ballgown进行转录本水平的差异分析

    常见的转录组差异分析有两种策略,一种是基于raw count的定量方式,比如DESeq2, edgeR等;另外一种是基于FPKM/RPKM的定量方式,比如cuf...

    生信修炼手册

扫码关注云+社区

领取腾讯云代金券