正文
flutter上下刷新,flutter返回页面刷新
小程序:扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序
【扫一扫了解最新限行尾号】
复制小程序
Flutter的setState(状态刷新)
Flutter有两个常用的状态类:
标记为dirty,执行的markNeedsBuild,定义在Element类中:
当前Element节点被标记为dirty,同时调用owner的scheduleBuildFor方法:
将element元素添加到全局的“脏”链表里。
BuildOwner用来管理哪些需要更新的Widget。这个owner最开始被初始化的地方在WidgetsBinding的initInstances方法中,随后初始化了onBuildScheduled方法,对应执行的是_handleBuildScheduled,定义在WidgetsBinding类中:
ensureVisualUpdate 方法定义在SchedulerBinding类中:
在提交下一帧绘制的时候会调用到scheduleFrame方法,提交给引擎绘制,看看scheduleFrame方法,也定义在SchedulerBinding类中:
提交给引擎绘制之后,会收到onDrawFrame的回调,最终执行到_handleDrawFrame方法中,对应的是handleDrawFrame方法,定义在SchedulerBinding类中:
在RendererBinding的initInstances方法中添加了一个回调到这个List中,对应的是RenderBinding的drawFrame方法,对应的节点进行绘制渲染操作。
WidgetsBinding中的drawFrame方法:
看看这里的buildScope方法,定义在BuildOwner方法中。在上面 scheduleBuildFor 方法介绍中有提到:"scheduleBuildFor 是把一个 element 添加到 _dirtyElements 链表,以便当[WidgetsBinding.drawFrame]中调用 buildScope 的时候能够重构 element。onBuildScheduled()是一个 BuildOwner 的回调"。在 drawFrame 中调用 buildOwner.buildScope(renderViewElement)更新 elements。
_dirtyElements列表在遍历的过程中执行rebuild方法,此时将所有标记为dirty的Element节点依次执行rebuild,preformRebuild,build,updateChild,update方法,执行界面更新。完成build,update操作完成之后,后续会将需要绘制的RenderObject添加到需要layout的列表中,等待绘制渲染。所有绘制完成之后将_dirtyElments列表清空,_inDirtyList标记位置为false。
提交给引擎绘制渲染
看看super.drawFrame(),这里就执行到了RendererBinding类中,定义如下:
这里就是将最终需要绘制渲染的画面提交给引擎的地方了,绘制完成之后就在界面显示更新后的视图了。
Flutter下拉刷新、上拉加载
注意: 滚动组件添加: physics: ClampingScrollPhysics() 可以处理IOS系统的物理滚动的效果(即橡皮筋效果)
ListView 是最常用的可滚动组件之一,可以沿一个方向线性排布所有子组件,并且它也支持基于Sliver的延迟构建模型
默认构造函数:
ListView.builder:
ListView.separated:
ListView.separated 可以在生成的列表项之间添加一个分割组件,它比 ListView.builder 多了一个 separatorBuilder 参数,该参数是一个分割组件生成器。
RefreshIndicator 下拉刷新:
RefreshIndicator 是 Material 风格的下拉刷新组件。
CupertinoSliverRefreshControl 下拉刷新:
CupertinoSliverRefreshControl 是 ios 风格的下拉刷新控件。
上拉加载的功能,需要用到 ScrollController + ListView组件:
flutter刷新页面的方法
这种方法最常见,但是有些地方引用的话,刷新的成本比较大,刷新的是整个页面,数据太多加载太慢的话,会有闪烁的现象
这种方法类似于iOS中的set方法,通过设置某个属性的时候,去刷新某个控件。在flutter中这种刷新方式,是对上面setState(){}方法的改进,根本的方法还是setState(){},只不过是通过方法去刷新某个控件。如下:
首先在pubspec.yaml中添加provider依赖
下面通过provider来实现一个发送验证码的案例。
创建一个TimerModel文件
页面布局如下:
Flutter局部刷新方法
Flutter中Widget分为StatefulWidget和StatelessWidget,分别为动态视图和静态视图,视图的更新需要调用StatefulWidget的setState方法,这会遍历调用子Widget的build方法。当一个主页面比较复杂时,会包含多个widget,如果直接调用setState,会遍历所有子Widget的build,这是非常不必要的性能开销,有没有单独刷新指定Widget的方式呢?这个时候就要用到GlobalKey了。
一个StatefulWidget包含一个Button,一个Text,通过点击Button调用主Widget的setState方法,刷新Text,示例如下:
同样一个StatefulWidget包含一个多个Text和Button,点击Button我们只需要刷新指定的Text,通过GlobalKey的方式,实现如下:
主Widget,包含一个需要更新的TextWidget和一个不需要更新的Text
需要单独更新的Widget
传递事件的Button
这样点击Button就只会更新指定的TextWidget了,效果如下:
这只是一个简单的例子,在实际开发中为了页面刷新的高效率,模块化封装非常重要。很多情况下都只需要局部刷新,而不是重构整个视图。所以Globalkey的运用在项目中需要熟练掌握
Flutter 下拉刷新、上拉加载flutter_easyrefresh的使用
flutter_easyrefresh: ^2.0.5
Pub get一下
下面我就以flutter_easyrefresh这个插件进行讲解。
[参照]{ }
Flutter listview下拉刷新,上拉加载更多封装
本文在 pull_to_refresh 的基础上对刷新做了封装,可以根据刷新状态自定义想要的头和尾。
本文刷新头和尾都使用的 lottie 动画,
lottie动画可以参考
接下来就可以在需要使用list view刷新的页面使用了 如下:
效果图: