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触发拖动的方式是按下。
今天的文章对大家是否有帮助?如果有,请在文章底部留言和点赞,以表示对我的支持,你们的留言、点赞和转发关注是我持续更新的动力!
我创建了一个关于flutter的微信交流群,欢迎您的加入,让我们一起学习,一起进步,开始我们的故事,生活不止眼前的苟且,还有诗和《远方》。
==微信:mqd_zzy==
当然我也非常希望您关注我个人的公众号,里面有各种福利等着大家哦。
上一篇: jQuery+CSS3实现404背景动画特效【转】
下一篇: python程序计算运行时间差