美文网首页Flutter圈子FlutterFlutter中文社区
Flutter ScrollView上拉加载更多

Flutter ScrollView上拉加载更多

作者: Brant白叔 | 来源:发表于2018-04-25 17:08 被阅读196次

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

    相关文章

      网友评论

        本文标题:Flutter ScrollView上拉加载更多

        本文链接:https://www.haomeiwen.com/subject/pfpylftx.html