Flutter实现不规则瀑布流布局拖拽重排序

因为业务,所以需要用flutter去实现一种不规则图形的瀑布流,但是同时需要支持拖拽并重新排序。效果类似如下。

查询过现有的插件,要么是仅支持同样大小的组件进行排序,要么就是动画效果不是很满意,有点死板,总有这样那样的问题,所以自己写了一个,地址如下:staggered_reorderable

version 0.0.12支持的功能:

  1. scrollDirection :指定布局方向,支持水平和垂直。
  2. duration :拖拽时触发重排序的动画持续时间。
  3. antiShakeDuration:防抖时间,为了防止临界点时频繁触发重排序(只能解决一部分,还是会出现,后续会优化掉 ),默认milliseconds:100
  4. collation :拖拽完成后的交换规则,true:交换,false:插入,默认false。
  5. children :布局的子项,需要是List<*ReorderableItem*> 类型。
  6. columnNum:布局的个数,垂直布局时为每行,水平布局时为每列,默认3。
  7. spacing:间隙 ,默认5.0。
  8. canDrag:是否允许拖拽,不允许则为单纯的不规则图形瀑布流布局。
  9. forwardRedundancy :自动滚动冗余偏移量[Axis.vertical]向上; [Axis.horizontal]向左,默认40.0。
  10. backwardRedundancy :自动滚动冗余偏移量[Axis.vertical]向下; [Axis.horizontal]向右,默认40.0。
  11. scrollStep:每次自动滚动长度,默认10.0。
  12. onReorder :每次交换完会调用此方法,获取排序后的trackingNumber列表。
相关推荐
wordbaby1 小时前
Flutter Form Builder 完全指南:告别 Controller 地狱
前端·flutter
tbit3 小时前
fluwx 拉起小程序WXLog:Error:fail to load Keychain status:-25300, keyData null:1
flutter·ios·微信小程序
QuantumLeap丶4 小时前
《Flutter全栈开发实战指南:从零到高级》- 19 -手势识别
flutter·ios·前端框架
卢叁6 小时前
Flutter之阿里云视频播放器支持 iOS模拟器解决方案
flutter
鹏多多9 小时前
flutter睡眠与冥想数据可视化神器:sleep_stage_chart插件全解析
android·前端·flutter
Zender Han16 小时前
Flutter 新版 Google Sign-In 插件完整解析(含示例讲解)
android·flutter·ios·web
weixin_4111918419 小时前
flutter中WebView的使用及JavaScript桥接的问题记录
javascript·flutter
QuantumLeap丶1 天前
《Flutter全栈开发实战指南:从零到高级》- 18 -自定义绘制与画布
android·flutter·ios
你听得到111 天前
Web前端们!我用三年亲身经历,说说从 uniapp 到 Flutter怎么转型的,这条路我爬过,坑我踩过
前端·flutter·uni-app
fouryears_234171 天前
Android 与 Flutter 通信最佳实践 - 以分享功能为例
android·flutter·客户端·dart