Flutter 实现上拉加载更多、下拉刷新-蒲公英云

Flutter 实现上拉加载更多、下拉刷新

参考：ListView下拉刷新与加载更多

文章目录

相关文章推荐
实现效果
实现分析
- 下拉刷新
- 上拉加载更多
源码

相关文章
Flutter 搭建具有 Drawer 和 BottomNavigationBar 的静态项目框架
Flutter 环境搭建以及填坑指南（Win10 系统且已有 Android 开发环境）
Flutter 入门实现 ListView 列表页面以及收藏页面
Flutter Widget 静态布局实战
Flutter 容器类 Widget

实现效果截图
下拉刷新

上拉加载更多

实现分析

下拉刷新
下拉刷新使用的是 RefreshIndicator组件来实现，使用伪代码如下：

@override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: new RefreshIndicator(
          onRefresh: _handleRefresh,
        ));
  }

在body中添加RefreshIndicator 组件，在 onRefresh中实现下拉刷新的操作，这里的_handleRefresh方法代码如下：

Future  _handleRefresh() async {
    // 延迟3秒后添加新数据， 模拟网络加载
    await Future.delayed(Duration(seconds: 3), () {
      setState(() {
        _suggestions.clear();
        _suggestions.addAll(generateWordPairs().take(20));
        return _suggestions;
      });
    });
  }

上拉加载更多
加载更多的组件在Flutter中是没有提供的，所以我们只能自己实现，在以前Android 中上拉加载更多可以通过监听滑动来实现，这里应该也是可以这么操作的。

Flutter的ListView中有一个ScrollController属性，通过监听这个滑动来实现加载更多。

实现步骤如下：

定义ScrollController _scrollController = new ScrollController();

在 ListView 的列表中添加controller: _scrollController,

// listView 列表
Widget _buildSuggestions() {

return new ListView.builder(
  padding: const EdgeInsets.all(16.0),
  itemCount: _suggestions.length + 1,
  itemBuilder: (context, i) {
    // 在每一列之前，添加一个1像素高的分隔线widget
    if (i.isOdd) return new Divider();
    // 最后一个单词对
    if (i == _suggestions.length) {
      return _buildLoadMore();
    } else {
      return _buildRow(_suggestions[i]);
    }
  },
  controller: _scrollController,
);

在 initState()方法中监听滑动，如果滑动到最后则获取加载更多的数据

@override
void initState() {

super.initState();
_suggestions.addAll(generateWordPairs().take(20));
_scrollController.addListener(() {
  if (_scrollController.position.pixels ==

_scrollController.position.maxScrollExtent) {

    _getMoreData();
  }
});

}

_getMorData方法实现如下：

// 加载更多
  Future _getMoreData() async {
    await Future.delayed(Duration(seconds: 3), () {
      setState(() {
        // 这里是本地数据，因此在无网的时候也会加载数据
        _suggestions.addAll(generateWordPairs().take(10));
        return _suggestions;
      });
    });
  }