分享轮子-flutter下拉刷新上拉加载

flutter下拉上拉组件轮子

什么是flutter?

首先说下flutter,估计这个应该挺多人没听过flutter这个框架,它是一个google推出的跨平台的移动应用UI框架,和React Native是一样的目的,支持三大平台:Android,Ios,还有一个是google新出的系统,忘了叫什么...本人React Native也是用过一点了,只不过没深刻研究。总的来讲,flutter这个框架性能仍是能够彻底虐React Native,毕竟它没有中间层。特别是加载GIF,flutter处理得很好,Rn的话,几张gif在界面加载进去直接卡死奔溃了...flutter还有一个亮点就是,真正的跨平台,何为真正?就是在IOS里使用material design,android使用ios风格。两个平台运行后界面几乎如出一辙。最后,说下缺点:没有JSX或者XML,括号太多,代码可读性差。学习成本比rn高,它layout能够分割成N个组件,你不太容易明白每一个layout做用究竟是什么。

简介

进入正题,这是一个开源的下拉刷新+上拉加载组件,What?看到这里,你可能会吐槽又是下拉刷新,是在重复造轮子吗?不!若是你搜索flutter里的下拉刷新组件,很难有至关好的轮子。该组件是在外部进行封装,几乎适合全部容器,例如:listView,gridView,Container,Text,ScrollView...等等.

为何写这个?

由于flutter如今组件真的太少了,我想找一个下拉刷新的组件很难,不少都不知足个人需求,要不缺乏UI,要不就扩展性很低限制性高。因此为了写项目第一步,没有一个好的下拉刷新组件真的不能写项目- -。

老板求个GIF爽下?

IOS:

Android:

如何实现?

一开始其实我打算用它提供的那个Size的动画,经过对高度改变来实现头部和尾部,但中途我发现这种想法不行,由于这个动画只能沿着顶部坐标来缩放，不能沿着底部坐标为原点来缩放。因此致使Revert过去了。后来也想了不少不少动画,偏移动画也试过,仍是无果。最后,决定用的方法也是要使用到Size动画,不过有点不一样的是这里头部事实上有两个部件在那,一个是真正的头部组件,一个是占位把头部控件压上去的占位View,这个占位View要配合Size的动画改变大小来使头部组件能在刷新状态里面悬浮必定距离。这样就能够实现下拉上拉，而且利用IOS的弹性也是至关吊,在外部组件封装扩展性也很高。 框图:

感想

实现的过程当中,遇到不少不少坑爹的地方。第一,flutter不容许你在build方法里获取子组件的高度,其实好像react native也是,由于你界面还没被渲染出来,确定无法知道里面高度,而且没有提供一个渲染完成的回调方法,像Android里的oncreate,这个问题不少人在它的issue起码提过5,6个帖子。第二,滚动的监听方法提供有点不完善,具体表如今不少地方。第三,布局控件设计得有点复杂,你们都知道,Android布局最经常使用五种对吧?Relative,Linear,Table...等等,但你知道flutter提供了多少种给咱们吗?Row,Column,Center,Align,Flow,Container,Stack....等等数不清,它就是把控件的属性分割为控件了,而且这也是大众吐槽flutter代码可读性的缘由,致使学习成本很高。

附地址

Github
来自个人博客