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

Flutter 实现上拉加载更多、下拉刷新加载更多的组件在Flutter中是没有提供的,所以我们只能自己实现,在以前Android 中上拉加载更多可以通过监听滑动来实现,这里应该也是可以这么操作的。 Flutter的ListView中有一个ScrollController属性,通过监听这个滑动来实现加载更多。 至此,下…

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

文章目录

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

相关文章

Flutter 搭建具有 Drawer 和 BottomNavigationBar 的静态项目框架

Flutter Widget 静态布局实战

Flutter 容器类 Widget

Flutter 入门实现 ListView 列表页面以及收藏页面

Flutter 环境搭建以及填坑指南(Win10 系统且已有 Android 开发环境

实现效果截图

下拉刷新

上拉加载更多

实现分析

下拉刷新 下拉刷新使用的是 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 中上拉加载更多可以通过监听滑动来实现,这里应该也是可以这么操作的。

FlutterListView中有一个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

今天的文章Flutter 实现上拉加载更多、下拉刷新分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/16311.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注