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

绝地灬酷狼 2022-03-17 13:09 548阅读 0赞

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

**文章目录**

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

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

**实现效果截图**  
![下拉刷新][1240]

![上拉加载更多][1240 1]

### 实现分析 ###

**下拉刷新**  
下拉刷新使用的是 `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;
          });
        });
      }

至此，下拉刷新和上拉加载就实现完成了，欢迎大家一起交流，共同进步。

### 源码 ###

> 如果对你有帮助，请帮忙点个`star`，谢谢~

如有错误欢迎指出，共同进步。  
源码地址：[FlutterTest][]

[ListView]: http://flutter.link/2018/05/03/ListView%E4%B8%8B%E6%8B%89%E5%88%B7%E6%96%B0%E4%B8%8E%E5%8A%A0%E8%BD%BD%E6%9B%B4%E5%A4%9A/
[Flutter _ Drawer _ BottomNavigationBar]: https://blog.csdn.net/ITxiaodong/article/details/87882410
[Flutter _Win10 _ Android _]: https://blog.csdn.net/ITxiaodong/article/details/85809584
[Flutter _ ListView]: https://blog.csdn.net/ITxiaodong/article/details/85951992
[Flutter Widget]: https://blog.csdn.net/ITxiaodong/article/details/86661608
[Flutter _ Widget]: https://blog.csdn.net/ITxiaodong/article/details/86671157
[1240]: /images/20220317/834d949c65864a848a0f5b4fbd140a6e.png
[1240 1]: /images/20220317/547233e0da2a4f3089e545506cac5be5.png
[FlutterTest]: https://github.com/dongxi346/FlutterTest/blob/master/lib/HomePage.dart