Flutter开发之——下拉刷新
一 概述
本文介绍Flutter中的下拉刷新组件：
- RefreshIndicator：Material风格的下拉刷新组件
- CupertinoSliverRefreshControl: ios风格的下拉刷新控件
- flutter_easyrefresh：第三方上拉刷新，下拉加载组件
二 RefreshIndicator
2.1 构造方法
class RefreshIndicator extends StatefulWidget {const RefreshIndicator({Key? key,required this.child,this.displacement = 40.0,required this.onRefresh,this.color,this.backgroundColor,this.notificationPredicate = defaultScrollNotificationPredicate,this.semanticsLabel,this.semanticsValue,this.strokeWidth = 2.0,this.triggerMode = RefreshIndicatorTriggerMode.onEdge,})
}
2.2 常用属性说明
| 属性 | 说明 | 取值 |
|---|---|---|
| child | 显示的数据试图 | 通常是[ListView] or [CustomScrollView] |
| displacement | 指示器到顶部或者底部到距离 | double |
| color | 指示器的前置颜色 | Color |
| backgroundColor | 指示器的背景颜色 | Color |
2.3 示例
代码
List<int> _list =[1, 2, 3,];
body: RefreshIndicator(color: Colors.red,backgroundColor: Colors.lightBlue,onRefresh: () {setState(() {_list.add(_list.length+1);});return Future.delayed(Duration(seconds:1));},child: ListView.separated(itemCount: _list.length, separatorBuilder: (context,index){return Divider(height: 10,color: Colors.red,);} ,itemBuilder: (BuildContext context, int index){return Center(child: Text("数据${_list[index]}"),heightFactor: 1.5,);}, ),)
效果图
三 CupertinoSliverRefreshControl
3.1 用法说明
- CupertinoSliverRefreshControl的用法和RefreshIndicator不同，CupertinoSliverRefreshControl需要放在CustomScrollView中
- CustomScrollView中需要包含两个属性：sliver(滚动试图内容)和physics(滚动对象)
- sliver：包含CupertinoSliverRefreshControl和SliverList两个视图组件，CupertinoSliverRefreshControl控制刷新，设置刷新组件的属性；SliverList设置显示的内容
- physics：控制滚动类，默认为
const BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics())，不设置无法下拉滚动
3.2 示例
代码
List<int> _list =[1, 2, 3,];
CustomScrollView(physics: const BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),slivers: <Widget>[//const CupertinoSliverNavigationBar(largeTitle: Text('Scroll down')),CupertinoSliverRefreshControl(refreshTriggerPullDistance: 100.0,refreshIndicatorExtent: 60.0,onRefresh: () async {await Future<void>.delayed(const Duration(milliseconds: 1000));setState(() {_list.add(_list.length+1);});},),SliverList(delegate: SliverChildBuilderDelegate((BuildContext context, int index) =>Center(child: Column(children: [Text("数据${_list[index]}"), Divider(height: 10,color: Colors.red,)],),),childCount: _list.length,),),],)
效果图
四 flutter_easyrefresh
4.1 仓库地址
Github-flutter_easyrefresh：https://github.com/xuelongqy/flutter_easyrefresh
4.2 插件地址
flutter_easyrefresh 2.2.1：https://pub.flutter-io.cn/packages/flutter_easyrefresh
4.3 插件的安装及卸载
插件安装
打开CMD终端，执行如下指令(自动添加pubspec.yaml依赖)
flutter pub add flutter_easyrefresh
插件卸载
打开CMD终端，执行如下指令(pubspec.yaml依赖被删除)
flutter pub remove flutter_easyrefresh
4.4 示例(基本用法，更多用法请看文档)
代码
List<int> _list =[1, 2, 3,];
EasyRefresh(child: ListView.separated(itemCount: _list.length,separatorBuilder: (context,index){return Divider(height: 10,color: Colors.red,);} ,itemBuilder: (BuildContext context, int index){return Center(child: Text("数据${_list[index]}"),heightFactor: 1.5,);}, ),onRefresh: () async{await Future<void>.delayed(const Duration(milliseconds: 1000));setState(() {_list.add(_list.length+1);});},onLoad: () async{await Future<void>.delayed(const Duration(milliseconds: 1000));setState(() {_list.remove(_list.length);});},效果图
五 参考
- CupertinoSliverRefreshControl class
Flutter开发之——下拉刷新相关推荐
- Flutter如何实现下拉刷新和上拉加载更多
效果 下拉刷新 如果实现下拉刷新,必须借助RefreshIndicator,在listview外面包裹一层RefreshIndicator,然后在RefreshIndicator里面实现onRefre ...
- 直播电商软件开发，下拉刷新
直播电商软件开发,下拉刷新实现的相关代码 使用页面生命周期 onPullDownRefresh,当处理完数据刷新后,uni.stopPullDownRefresh 可以停止当前页面的下拉刷新 onPu ...
- AndroidStudio安卓原生开发_SwipeRefreshLayout_下拉刷新控件---Android原生开发工作笔记119
然后我们再来看一个SwipeRefreshLayout,这个是用来实现下拉刷新的一个UI控件. 注意这个SwipeRefreshLayout里面只能放一个子view,一般都是放一个listview.来 ...
- 安卓开发 phoenix下拉刷新+taurus下拉刷新
phoenix 刷新 依赖: //phoenix下拉加载compile 'com.yalantis:phoenix:1.2.3' xml使用依赖控件包裹Listview: <?xml versi ...
- Flutter如何实现下拉刷新和上拉加载更多，阿里巴巴android开发手册
return null; } 异步加载数据,注意:在Flutter中刷新数据使用的是setState,不然无效,数据不会刷新:数据的获取需要使用[]取值,不能使用对象" . "的取 ...
- Flutter开发之ListView下拉刷新上拉加载更多（35）
在Flutter开发之ListView组件(21) 文章中,我们了解了ListView组件的基本使用.但是数据比较少,没有涉及分页加载.而实际开发中,下拉刷新和分页加载几乎是所有APP的标配.在iOS ...
- 分享轮子-flutter下拉刷新上拉加载
flutter下拉上拉组件轮子 什么是flutter? 首先说下flutter,估计这个应该挺多人没听过flutter这个框架,它是一个google推出的跨平台的移动应用UI框架,和React Nat ...
- Flutter listview下拉刷新 上拉加载更多 功能实现
下拉刷新 在Flutter中系统已经为我们提供了google material design的刷新功能 , 样式与原生Android一样. 我们可以使用RefreshIndicator组件来实现Flu ...
- Flutter RefreshIndicator 下拉刷新组件 Material 风格的刷新效果
题记 -- 优美的应用体验 来自于细节的处理,更源自于码农的自我要求与努力,当然也需要码农年轻灵活的思维. 盘点Flutter跨平台APP开发中使用到的进度条 Flutter是谷歌推出的最新的移动开发 ...
最新文章
- R语言使用ggplot2包geom_jitter()函数绘制分组（strip plot，一维散点图）带状图（配置点的形状、大小）实战
- 《TCP/IP详解卷1：协议》第6章 ICMP：Internet控制报文协议-读书笔记
- python 求连线相似度_Python分析《都挺好》中的人物关系，苏大强与蔡根花是真爱？...
- linux中怎样进入桌面目录,linux – 如何获得给定用户“桌面路径”
- 2_6 CompositeMode.cpp 组合模式
- vue的props实现父组件变化子组件一起变化
- win8.1已阻止java_win8系统下打开java程序时出现应用程序已被安全设置阻止的解决方法...
- div中字垂直居中对齐
- 14张思维导图带你系统学习Python核心知识
- 如何获取登录token值_Token认证，如何快速方便获取用户信息
- 对象序列化和反序列化是怎么回事
- [面试] 算法（二）—— 第一个出现一次的字符（第一个出现 k 次、出现最多次）
- PHP-利用GD库新建图像
- websocket binary 数据解析_websocket协议
- ul1581标准_ul1581燃烧标准
- unity生涯的开始——太空飞船小游戏制作
- win10 1050ti anaconda搭建tensorflow-gpu
- 为什么有阿里云ACP认证好找工作呢？
- 再见 Excel，你好 Python Spreadsheets！ ⛵
- cpolar内网穿透介绍