欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2022-03-26 22:57:17
注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 Draggable系列组件可以让我们拖动组件。 Draggable Draggable组件有2个必须填写的参数, 参数是子控件, 参数是拖动时跟随移动的组件, ......

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

效果如下:

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

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

效果如下:

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

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

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(
          '孟',
        ),
      ),
    ),
  );
}

效果如下:

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

longpressdraggable

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

今天的文章对大家是否有帮助?如果有,请在文章底部留言和点赞,以表示对我的支持,你们的留言、点赞和转发关注是我持续更新的动力!
我创建了一个关于flutter的微信交流群,欢迎您的加入,让我们一起学习,一起进步,开始我们的故事,生活不止眼前的苟且,还有诗和《远方》。
==微信:mqd_zzy==

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

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