Flutter ScrollView上拉加载更多关于学习

2018.05.07 更新 上拉加载可以不用Notification,直接用ScrollController,代码如下:

_scrollController.addListener(() {
      if (_scrollController.position.pixels ==
              _scrollController.position.maxScrollExtent &&
          !this.isRefreshing &&
          !this.isNoMoreData) {
        // 滑动到最底部了
        _getData();
      }
    });

以下是原文:

前面讲了 下拉刷新,列表离不开的还有一个上拉加载更多,今天就来讲一下上拉加载更多在flutter里面如何实现。

在Flutter的github issuses里面,也有人提到了这个问题,但是官网上并没有一个很好的教程指引。

思路是得到滑动的偏移量,跟ListView总的高度进行比对。那么得得到滑动的偏移量和ListView的总高度这两个值,在源码里面找了很久后,发现根本得不到ListView的内容高度。只能自己计算。但是发现了另一个数据。ScrollController里面有一个mostRecentlyUpdatePosition,这个对象的maxScrollExtent是可以滑动的最大距离,当滑动到底部的时候,maxScrollExtent跟ScrollController的offset是相等的。可以用这个比较来判断是否滑动到底部。

body: new NotificationListener(
        onNotification: _onNotification,
        child: new RefreshIndicator(
          key: _refreshIndicatorKey,
          onRefresh: _refreshData,
          child: new ListView.builder(
            controller: _scrollController,
            physics: const AlwaysScrollableScrollPhysics(),
            itemCount: this.list.length + 1,
            itemBuilder: (_, int index) => _createItem(context, index),
          ),
        ),
      ),

主要的判断代码就是在这个ScrollNotification的回调方法里面了,看一下下面的代码应该就明白了。

bool _onNotification(ScrollNotification notification) {
    if (notification is ScrollUpdateNotification) {
      // 当没去到底部的时候,maxScrollExtent和offset会相等,可以准确的判断到达底部还有多少距离时开始加载数据了。。
      if (_scrollController.mostRecentlyUpdatedPosition.maxScrollExtent >
              _scrollController.offset &&
          _scrollController.mostRecentlyUpdatedPosition.maxScrollExtent -
                  _scrollController.offset <=
              50) {

        // 要加载更多
        if (this.isMore && this.loadMoreStatus != LoadMoreStatus.loading) {
          // 有下一页
          print('load more');
          this.loadMoreStatus = LoadMoreStatus.loading;
          _loadMoreData();
          setState(() {});

        } else {}
      }
    }
    return true;
  }

关于学习

flutter的学习文章都整理在这个github仓库

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏施炯的IoT开发专栏

《101 Windows Phone 7 Apps》读书笔记-Groceries

课程内容 Ø Panarama控件     Groceries是一个简易的购物清单应用程序,我们可以用它来一步一步建立自定义的购物清单。根据个人的喜好,我们...

1825
来自专栏新工科课程建设探讨——以能源与动力工程专业为例

2 HTML5基础

答:借助HTML5解决和分析工业设计中的问题,易于实现数据可视化,而且支持所有主流操作系统。与传统C/C++/FORTRON计算机语言相比具备几个显著优势:首先...

2130
来自专栏iKcamp

翻译 | 关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案

原文地址: Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS 原文作者:...

2698
来自专栏互联网杂技

HTML head 头标签 总结

HTML head 头部分的标签、元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多...

4527
来自专栏Golang语言社区

nwui —— 又一个go语言图形界面解决方案

Github: https://github.com/go-nwui/nwui 最近开的一个大坑,具体实现就是自动生成htm+css+js然后调用nw.js来显...

2803
来自专栏菩提树下的杨过

额的神啊:AS3中Button被disable了,也会触发Click事件!

btnTest.addEventListener(MouseEvent.CLICK,btnTestClick); function btnTestClick(...

2907
来自专栏腾讯社交用户体验设计

移动H5前端性能优化指南 - 腾讯ISUX

4401
来自专栏九彩拼盘的叨叨叨

减少浏览器兼容性问题

做为一个前端工程师,不少时间都在处理浏览器兼容性问题。本文对如何减少浏览器兼容性问题的方法做了些总结。

1052
来自专栏DeveWork

Google官方网页载入速度检测工具PageSpeed Insights 使用教程

相信有接触前端开发的大神们都听说过Google官方的PageSpeed Tools,这个网页载入速度检测工具有在线版本也有一个 Chrome 扩展,叫PageS...

5988
来自专栏酷玩时刻

android-iconify 使用详解

2、在java代码中通过使用一个IconDrawable为具有setIcon(Drawable drawable)方法的控件设置该字体图标

1142

扫码关注云+社区

领取腾讯云代金券