Flutter进阶技巧之300行代码实现拖拽排序
前言
有没有不计算，代码少的方式来实现这个拖拽排序呢？
文末有福利！！！
效果设计
拖拽排序这块，其实最复杂的部分就是排序动画的处理，在 reOrderables 中，可以说绝大部份代码都是为了定位排序位置，最后通过调整Size，用AnimationController辅助处理，这种方式来实现一个折叠动画；
说实话，效果是有了，但是这代码确实让人看的容易晕；
在 Android 中，其实更多的排序动画是类似这种平移动画的：
所以这次我也计划使用这种动画实现(其实就是懒)；
当然，该有的虚影之类的也是应该有的东西；
实现方案：
获取各个Item的位置信息
要想实现上面的平移动画，第一步就是知道各个Item自己本身在GridView中的位置坐标；
关于获取位置的实现方式，大部分方案都是通过给各个Item加上GlobalKey，然后获取renderObject来测量；
不过这次玩点花的，我想尽量少些代码的同时，减少GlobalKey的数量；
众所周知，sliver在layout方法结束后，会调用 didFinishLayout 方法，来通知layout结束，并公布当前缓存的第一个和最后一个Item的index；
既然这样，我在layout方法结束的时候，获取一下各个Item所在的起始位置不就行了？
提供一个共享Item位置的 InheritedWidget
这个InheritedWidget的作用，就是保存两个列表，分别存放Item的实际位置和重排序位置：
至于这两个List干啥用的，后面再揭秘；
PS ： 其实用List存放位置信息是不合适的，因为List中的第一个Item，并不一定是GridView中index = 0 的那个Item，所以最后处理的时候要做一个index的转换，比较麻烦；
我这里偷懒，先用List存了
给我一个Key，还你一片Offset
继承GridView，重写buildChildLayout ， 给SliverGrid设置一个GlobalKey：
这个 Key 的作用，就是获取 SliverGrid 的 Element；而通过 Element 就可以拿到 各个child 对应的Element；
不过这里稍微不同的是，由于所说方法名是didFinishLayout，但是实际上，这里是performLayout方法的最后一步而已，所以performLayout方法实际上是没有完成的；
因此parent默认是不允许访问child的size的，如果调用renderOject.localToGlobal就会报错；
既然这样，可以用另一种方式获取child的位置信息，比如说，ParentData：
PS ：其实Key这玩意也可以不用设置，在前面对Sliver的分析中已经知道了，调用 SliverChildDelegate 的 didFinishLayout方法的就是 SliverGrid 的 Element ，说白了，如果勤奋点，把 sliver那块重写下，就可以把Element传过来了；
同时因为 Element 可以视为 BuildContext ， context 也能拿到，进而也能用来获取InheritedWidget，共享数据也很方便，当然这里是放到build方法中获取InheitedWidget来偷懒；
所以我感觉最合适的方法是重写sliver以及这个SliverChildDelegate……
懒人福音 AnimatedContainer
在这里对build的Item进行一定的处理，首先最外层包一层AnimatedContainer：
AnimatedContainer 可以说是一个全自动动画播放器，没有AnimationController和Tween，仅仅一个setState就可以方便的实现切换动画；
而前面存放的两个List中的内容，就在这里用上了：
只需要把两个Item的Offset一减，setState之后就能实现位置平移动画；
PS：这个方案来自一位德国小哥的项目
不过我感觉他也写的挺麻烦的，没有结合DragTarget，而是仅仅通过Draggable返回的手势信息来做的碰撞检测，看的有点眼花……
PPS : 我知道他为什么不用DragTarget了……GridView本身的hitTest，是根据主轴交叉轴信息修改了点击坐标位置的，但是AnimatedContainer 中加入Transform后，这个坐标再次经过修改后，就根本命中不了任何一个Item…………所以，当Item通过Transform改变位置后，Draggable和DragTarget 是不会响应任何手势的……
至于这两个List中的内容是如何改变的，就是下面这部分了：
Pull My “Draggable” Trigger !
这里就来到了熟悉的Draggable+DragTarget部分：
在上图中，最后构造出的Item是一个Stack，其中原本 Item 应有的 child 传递给了buildDraggable方法构造Draggable；
另一部分就是DragTarget ，关键部分就在这里，其所做的事其实就是检测到碰撞后，根据自己和碰撞Item的index，重排序一下：
最后通过回调，触发外面的setState，启动动画即可：
结语：
两个文件共计不到300行：
虽说不到300行实现了目标效果，不过bug还是有的，比如说再次滑动切换DragTarget的时候，位置信息就算错了，估计某个状态没存上，onDragEnd之后通知保存数据这块也没做处理
但是300行确实能实现核心逻辑，剩下的东西都是些边边角角的部分，多也多不到哪去……吧，大概吧～～～～～
回正题：国际惯例，看下效果：
更新：
后来看了下，这块还真没法用Draggable+DragTarget 的方案，还真只能靠Draggale返回的手势回调来做计算…………
原因就是AnimatedContainer 这块中的PPS补充部分……
不计算这个目标流产了……
通过计算的方式估计要加个200行代码……
或者说有什么方案能让GridView的Item移动，但DragTarget不移动呢………… 比如说用Stack往Grid上面覆盖一层，用来放DragTarget呢 …………
部分……
不计算这个目标流产了……
通过计算的方式估计要加个200行代码……
或者说有什么方案能让GridView的Item移动，但DragTarget不移动呢………… 比如说用Stack往Grid上面覆盖一层，用来放DragTarget呢 …………
最后
按照国际惯例，给大家分享一套十分好用的Android进阶资料：《全网最全Android开发笔记》。
整个笔记一共8大模块、729个知识点，3382页，66万字，可以说覆盖了当下Android开发最前沿的技术点，和阿里、腾讯、字节等等大厂面试看重的技术。
好啦，这份资料就给大家介绍到这了，有需要详细文档的小伙伴，可以微信扫下方二维码回复JJ免费领取哈~
因为所包含的内容足够多，所以，这份笔记不仅仅可以用来当学习资料，还可以当工具书用。
如果你需要了解某个知识点，不管是Shift+F 搜索，还是按目录进行检索，都能用最快的速度找到你要的内容。
相对于我们平时看的碎片化内容，这份笔记的知识点更系统化，更容易理解和记忆，是严格按照整个知识体系编排的。
（一）架构师必备Java基础
1、深入理解Java泛型
2、注解深入浅出
3、并发编程
4、数据传输与序列化
5、Java虚拟机原理
6、高效IO
……
（二）设计思想解读开源框架
1、热修复设计
2、插件化框架设计
3、组件化框架设计
4、图片加载框架
5、网络访问框架设计
6、RXJava响应式编程框架设计
……
（三）360°全方位性能优化
1、设计思想与代码质量优化
2、程序性能优化
- 启动速度与执行效率优化
- 布局检测与优化
- 内存优化
- 耗电优化
- 网络传输与数据储存优化
- APK大小优化
3、开发效率优化
- 分布式版本控制系统Git
- 自动化构建系统Gradle
……
（四）Android框架体系架构
1、高级UI晋升
2、Android内核组件
3、大型项目必备IPC
4、数据持久与序列化
5、Framework内核解析
……
（五）NDK模块开发
1、NDK开发之C/C++入门
2、JNI模块开发
3、Linux编程
4、底层图片处理
5、音视频开发
6、机器学习
……
（六）Flutter学习进阶
1、Flutter跨平台开发概述
2、Windows中Flutter开发环境搭建
3、编写你的第一个Flutter APP
4、Flutter Dart语言系统入门
……
（七）微信小程序开发
1、小程序概述及入门
2、小程序UI开发
3、API操作
4、购物商场项目实战
……
（八）kotlin从入门到精通
1、准备开始
2、基础
3、类和对象
4、函数和lambda表达式
5、其他
……
好啦，这份资料就给大家介绍到这了，有需要详细文档的小伙伴，可以微信扫下方二维码回复JJ免费领取哈~
