Flutter :实现下拉刷新
程序员文章站
2024-03-22 22:57:22
...
Flutter :实现下拉刷新
效果如图所示
下拉刷新
准备工作:首先创建好一个ListView,并展示相应的数据
- 借助RefreshIndicator,将ListView包裹在其中
RefreshIndicator(
child: ListView.builder(
itemCount: _datas.length,
itemBuilder: _cellForRow,
),
),
- 实现RefreshIndicator中的onRefresh方法
Future _pullRefresh() async{
_datas.clear();
getDatas()
.then((List<Chat> 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,
),
),
注意:
1、在_pullRefresh加载数据必须是异步的
2、网络重新获取的数据必须在setState中刷新,否则无效,数据不会刷新
完整demo地址中的wechat_app_1
上一篇: 微信支付一些细节