Flutter 17: 图解 ListView 下拉刷新与上拉加载 (一)

??????小菜上次学 ListView 时，只学习了一下异步请求数据加载新闻和 Loading 等待的小知识点，但对于新闻列表数据的升级和加载更多是必不可少的，而实现【下拉刷新】与【上划加载更多】的方式有很多种，今天小菜整理一下使用三方库 flutter_refresh 来实现列表的数据升级。
??????小菜也是再偶然间看到有大神用到这个三方库的，小菜想要尝试的起因主要是由于一是由于 flutter_refresh 集成很简单，不用单独写头部样式和底部加载时的 loading 等；二是小菜技术太有限，对 Flutter 的未知有太多，想多尝试几种方式。

集成方式

1. pubspec.yaml 中 增加 flutter_refresh : ^0.0.2，并同步 packages get；
2. 在相应的 .dart 文件中增加引用 import ‘package:flutter_refresh/flutter_refresh.dart’;
3. 数据加载时暂时不用 ListView 变更为 new Refresh，小菜主要是解决 onHeaderRefresh 下拉刷新 和 onFooterRefresh 底部刷新 两个方法中的数据解决。小菜的测试接口需要根据每一页的最后一个新闻ID 和 整个的新闻数量为参数值进行解决。

// 顶部刷新Future<Null> onHeaderRefresh() {  return new Future.delayed(new Duration(seconds: 2), () {    setState(() {      rowNumber = 0;      lastFileID = '0';      newsListBean = null;      getNewsData(lastFileID, rowNumber);    });  });}// 底部刷新Future<Null> onFooterRefresh() async {  return new Future.delayed(new Duration(seconds: 2), () {    setState(() {      getNewsData(lastFileID, rowNumber);    });  });}// 接口数据解决getNewsData(var lastID, var rowNum) async {  await http      .get(          'https://...?lastFileID=${lastID}&rowNumber=${rowNum}')      .then((response) {    if (response.statusCode == 200) {      var jsonRes = json.decode(response.body);      newsListBean = NewsListBean(jsonRes);      if (lastID == '0' && rowNum==0 && dataItems != null) {         dataItems.clear();      }      setState(() {        if (newsListBean != null &&            newsListBean.list != null &&            newsListBean.list.length > 0) {          for (int i = 0; i < newsListBean.list.length; i++) {            dataItems.add(newsListBean.list[i]);          }          lastFileID = newsListBean.list[newsListBean.list.length - 1].fileID              .toString();          rowNumber += newsListBean.list.length;        } else {}      });    }  });}Widget childFreshWidget() {  Widget childFreWi;  if (dataItems != null && dataItems.length != 0) {    childFreWi = new Padding(      padding: EdgeInsets.all(6.0),      child: new Refresh(        onFooterRefresh: onFooterRefresh,        onHeaderRefresh: onHeaderRefresh,        childBuilder: (BuildContext context,            {ScrollController controller, ScrollPhysics physics}) {          return new Container(              child: new ListView.builder(            physics: physics,            controller: controller,            itemCount: rowNumber,            itemBuilder: (context, item) {              return buildListData(context, dataItems[item]);            },          ));        },      ),    );  } else {    childFreWi = new Stack(      children: <Widget>[        new Padding(          padding: new EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 35.0),          child: new Center( child: SpinKitFadingCircle( color: Colors.blueAccent, size: 30.0, ), ),        ),        new Padding(          padding: new EdgeInsets.fromLTRB(0.0, 35.0, 0.0, 0.0),          child: new Center( child: new Text('正在加载中，莫焦急哦~'), ),        ),      ],    );  }  return childFreWi;}

下拉刷新上拉加载更多

问题小结

??????小菜在测试过程中遇到了很多的小问题，现在逐一整理一下。

问题一：初始化进入页面后，加载完第一页之后刷新数据不加载，第二次刷新数据才加载，且加载的是上一次刷新的数据？

处理方式：

1. 进入页面时调用数据接口 initState()，为了保证第一次正常加载；
2. 在 getNewsData() 中肯定肯定要增加 setState(() {}); 小菜在测试时，每次刷新接口都会正常调用，但是都是第二次刷新才加载第一次刷新的数据，接口是正常的，但是数据总是慢一拍，小菜测试发现由于没有用 setState(() {}); 以后肯定要注意，这样才可以实时进行升级。

问题二：下拉刷新过程中，接口数据重复加载？

处理方式：

??????小菜目前还没有涉及缓存等方面的，单纯的一个下拉刷新应该是重新调用初始的接口，首先要清空列表，不然接口数据重复实实在在会出现的。

Future<Null> onHeaderRefresh() {  return new Future.delayed(new Duration(seconds: 2), () {    setState(() {      rowNumber = 0;      lastFileID = '0';      if (dataItems != null) {         dataItems.clear();      }      getNewsData(lastFileID, rowNumber);    });  });}

问题三：根据问题二的处理方案，显示正常，但是运行时 Log 报错，提醒 Widget 已创立？

处理方案：

??????小菜测试了很久，把这个判断列表制空从 onHeaderRefresh() 中移到数据解决的 getNewsData() 方法中，尽管不是非常了解，但是问题可以正常处理，小菜的了解是 onHeaderRefresh() 中解决的是数据和 Widget，而小菜自己的方法中是单纯的数据解决。

if (lastID == '0' && rowNum==0 && dataItems != null) {  dataItems.clear();}

??????小菜刚接触 Flutter 时间不长，还有很多不清楚和不了解的地方，假如又不对的地方还希望多多指出。以下是小菜公众号，欢迎闲来吐槽～

公众号