1.概念
上拉加载可以用 ScrollController实现,在这里不再描述,下面实现一种利用ListView.Builder实现的上拉加载。
2.代码
import 'package:flutter/material.dart';
class CirclePage extends StatefulWidget {
@override
_InfiniteListViewState createState() => new _InfiniteListViewState();
}
class _InfiniteListViewState extends State<CirclePage> {
static const loadingTag = "##loading##"; //表尾标记
var _words = <String>[loadingTag];
@override
void initState() {
super.initState();
_retrieveData();
}
@override
Widget build(BuildContext context) {
return ListView.separated(
itemCount: _words.length,
itemBuilder: (context, index) {
//如果到了表尾
if (_words[index] == loadingTag) {
//不足100条,继续获取数据
if (_words.length - 1 < 100) {
print('走进了');
//获取数据
_retrieveData();
//加载时显示loading
return Container(
padding: const EdgeInsets.all(16.0),
alignment: Alignment.center,
child: SizedBox(
width: 24.0,
height: 24.0,
child: CircularProgressIndicator(strokeWidth: 2.0)
),
);
} else {
//已经加载了100条数据,不再获取数据。
return Container(
alignment: Alignment.center,
padding: EdgeInsets.all(16.0),
child: Text("没有更多了", style: TextStyle(color: Colors.grey),)
);
}
}
return ListTile(title: Text(_words[index]));
},
separatorBuilder: (context, index) => Divider(height: .0),
);
}
void _retrieveData() {
Future.delayed(Duration(seconds: 2)).then((e) {
_words.insertAll(_words.length - 1,
//每次生成20个单词
['a','b','c','d','e','f','i']
);
print('这是数据$_words');
setState(() {
});
});
}
}
3.讲解
这个操作利用ListView.Builder的特性(只有这个元素出现在可视区域内,才会被Builder),_words开始的时候添加了一个字符,这个字符就是滑动到底部的标志,也就是说当这个页面初始化的时候,按照我这个高度会执行三次,其次就是每当_words[index] == loadingTag的时候,就意味着滑动到底部了,你就可以开始你自己的业务逻辑,
网友评论