思路:flutter中存在progress_indicator.dart這個文件,裏面有RefreshIndicator這裏類,裏面存在這咱們須要使用的方法: bash
首先須要定義一個變量:網絡
var curPage = 1;將使用它做爲一個標識,用因而首次頁面仍是加載頁面; 每次上拉加載會加1,如curPage++;這個標識也能夠用於每次網絡的請求(例如: 每次拉取10條;第一次是0-9的數據的10條數據,第二次從新請求10-19的數據)async
其次添加ScrollController _controller = new ScrollController(); 這裏_controller將用於上拉滑動監聽ide
NewsListpageState() {
_controller.addListener(() {
var maxScroll = _controller.position.maxScrollExtent;
var pixels = _controller.position.pixels;
if (maxScroll == pixels && listData.length < 100){
// 上拉刷新作處理
print('load more ...');
// curPage++;
setState(() {
//改變數據,這裏隨意發揮
listData = List<String>.generate(100, (i) => "CL $i");
});
}
});
複製代碼
數據由網絡請求獲取!每人使用的都不同,不用解釋了~post
var listData = List<String>.generate(30, (i) => "CL $i");
ui
總體代碼以下:spa
class NewsListpageState extends State<NewsListPagedemo>{
// TODO: implement build
var curPage = 1;
ScrollController _controller = new ScrollController();
var listData = List<String>.generate(30, (i) => "CL $i");
Future<Null> _pullToRefresh() async {
// curPage = 1;
//下拉刷新作處理
setState(() {
////改變數據,這裏隨意發揮
listData = List<String>.generate(30, (i) => "CL $i");
});
return null;
}
NewsListpageState() {
_controller.addListener(() {
var maxScroll = _controller.position.maxScrollExtent;
var pixels = _controller.position.pixels;
if (maxScroll == pixels && listData.length < 100){
// 上拉刷新作處理
print('load more ...');
// curPage++;
setState(() {
//改變數據,這裏隨意發揮
listData = List<String>.generate(100, (i) => "CL $i");
});
}
});
}
@override
Widget build(BuildContext context) {
Widget listView = new ListView.builder(
itemCount: listData.length,
itemBuilder: (context,i) {
//這裏填充本身想要的列表UI
return new Container(
height: 45.0,
color: Colors.blue,
child: new Text(
"$i",
style: new TextStyle(fontSize: 15.0),
),
);
},
controller: _controller,
);
return new RefreshIndicator(child: listView, onRefresh: _pullToRefresh);
}
}
複製代碼