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

吴老师

发布于 2018-09-05 02:59:10

2K00

代码可运行

文章被收录于专栏：吴老师移动开发吴老师移动开发

运行总次数：0

代码可运行

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;
  }