Flutter ：实现下拉刷新 效果如图所示
下拉刷新 准备工作：首先创建好一个ListView，并展示相应的数据
- 借助RefreshIndicator，将ListView包裹在其中
RefreshIndicator(
child: ListView.builder(
itemCount: _datas.length,
itemBuilder: _cellForRow,
),
),
- 实现RefreshIndicator中的onRefresh方法
Future _pullRefresh() async{
_datas.clear();
getDatas()
.then((List datas){
if (!_cancelConnect){
setState(() {
_datas.addAll(datas);
});
}
})
.catchError((e){
print('错误：${e}');
})
.whenComplete((){
print('完毕了！');
})
.timeout(Duration(seconds: 1))
.catchError((timeout){
_cancelConnect = true;
print('超时输出:$timeout');
});
}
RefreshIndicator(
onRefresh: _pullRefresh,
child: ListView.builder(
itemCount: _datas.length,
itemBuilder: _cellForRow,
),
),
注意：【Flutter （实现下拉刷新）】完整demo地址中的wechat_app_1
1、在_pullRefresh加载数据必须是异步的
2、网络重新获取的数据必须在setState中刷新，否则无效，数据不会刷新
推荐阅读
- 回顾 Flutter 2021 重要时刻，奉上虎年红包封面喜迎新年！
- Flutter实现左侧边栏导航
- 如何在 Flutter 创建一个后台任务
- Flutter Convex Bottom 底部导航
- Flutter动态化框架Thresh
- 基于 Riverpod 的 Flutter 状态管理
- Flutter 2022 产品路线图发布
- Flutter 插件库
- Windows Running “flutter pub get“ in XXX卡死
- Flutter之下拉刷新，上拉加载更多