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
来自我的博客

分享轮子-flutter下拉刷新上拉加载相关推荐

Flutter开发之ListView下拉刷新上拉加载更多（35）
在Flutter开发之ListView组件(21) 文章中,我们了解了ListView组件的基本使用.但是数据比较少,没有涉及分页加载.而实际开发中,下拉刷新和分页加载几乎是所有APP的标配.在iOS ...
Android ListView 实现下拉刷新上拉加载
转载请注明出处:http://blog.csdn.net/allen315410/article/details/39965327 1.简介无疑,在Android开发中,ListView是使用非常频 ...
开启Fluter基础之旅五-------ListView 3D滚动、Flipper效果、ListView下拉刷新上拉加载、ListView重排序...
继续来来操练Flutter的基础,对于Flutter的学习也有一段时间了,实操项目还木有做过,所以待这次基础学完之后就打算用一个项目对之前所学的进行一下巩固,不然光学这些零散的知识点最终还是不会Flu ...
下拉加载实现 java_[Java教程]iscroll5实现一个下拉刷新上拉加载的效果
[Java教程]iscroll5实现一个下拉刷新上拉加载的效果 0 2016-08-24 15:00:08 直接上代码!!! * { margin: 0; padding: 0; } ul, li { ...
小程序在父组件执行子组件方法，可适用于下拉刷新上拉加载之后执行子组件方法
当父组件引用了子组件的时候,会遇到父组件执行子组件的方法,比如下拉刷新上拉加载等事件只有在页面中才能检测到,但是获取数据的方法在子组件,这时就可以执行子组件方法. 思路很简单,类似于vue中给子组件加 ...
使用MJRefresh自定义下拉刷新,上拉加载动画
有时候我们需要自己设置下拉刷新,上拉加载动画的实现,这里主要是记录下使用MJRefresh自定义下拉刷新,上拉加载动画..... 下拉刷新我们只需要继承MJRefreshGifHeader即可: 实现 ...
android listview下拉刷新动画,android 安卓 listview 支持下拉刷新上拉加载更多
[1]重写listViewimport java.text.SimpleDateFormat; import java.util.Date; import com.example.testdddlea ...
Android 下拉刷新上拉载入多种应用场景超级大放送（上）
转载请标明原文地址:http://blog.csdn.net/yalinfendou/article/details/47707017 关于Android下拉刷新上拉载入,网上的Demo太多太多了,这 ...
react-native 自定义下拉刷新 / 上拉加载更多组件
1.封装 Scroller 组件 src/components/Scroller/index.js /*** 下拉刷新/上拉加载更多组件(Scroller)*/ import React, {Com ...

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