Flutter ScrollView上拉加载更多
2018-04-25 本文已影响196人
Brant白叔
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仓库里