欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Flutter :实现下拉刷新

程序员文章站 2024-03-22 22:57:22
...

Flutter :实现下拉刷新

效果如图所示
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