Flutter ScrollView上拉加载更多

2019年5月8日 370次阅读 来源: Brant白叔

2019.04.20 更新
ScrollNotification判断

bool onNotification(Notification notification) {
    if (notification is! ScrollNotification) {
      // 如果不是滚动事件，直接返回
      return false;
    }

    ScrollNotification scroll = notification as ScrollNotification;
    // 当前滑动距离
    double currentExtent = scroll.metrics.pixels;
    double maxExtent = scroll.metrics.maxScrollExtent;
    if (maxExtent - currentExtent > widget.startLoadMoreOffset) {
      // 开始加载更多
      
    }

    // 返回false，继续向上传递,返回true则不再向上传递
    return false;
  }

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仓库里

    原文作者：Brant白叔
    原文地址: https://www.jianshu.com/p/f68df93c4411
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞