import 'package:flutter/material.dart';
import 'dart:async';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('下拉刷新,上拉加载示例'),
),
body: DroupDownRefresh(),
),
);
}
}
class DroupDownRefresh extends StatefulWidget {
@override
_DroupDownRefresh createState() => _DroupDownRefresh();
}
class _DroupDownRefresh extends State<DroupDownRefresh> {
List list = List();
ScrollController scrollController = ScrollController();
int page = 0;
bool isLoading = false;
@override
void initState() {
super.initState();
initData();
scrollController.addListener(() {
if (scrollController.position.pixels ==
scrollController.position.maxScrollExtent) {
print('滑动到底部');
getMoreData();
}
});
}
@override
void dispose() {
super.dispose();
scrollController.dispose();
}
Future initData() async {
await Future.delayed(Duration(seconds: 1), () {
setState(() {
list = List.generate(15, (i) => '初始数据$i');
});
});
}
Future onRefreshData() async {
await Future.delayed(Duration(seconds: 1), () {
setState(() {
list = List.generate(15, (i) => '刷新后的数据$i');
});
});
}
Future getMoreData() async {
if (!isLoading) {
setState(() {
isLoading = true;
});
}
await Future.delayed(Duration(seconds: 1), () {
setState(() {
list.addAll(List.generate(5, (i) => '第$page次上拉的数据'));
page++;
isLoading = false;
});
});
}
Widget renderListItem(BuildContext context, int index) {
if (index < list.length) {
return ListTile(
title: Text(list[index]),
);
}
return showGetMoreWidget();
}
Widget showGetMoreWidget() {
return Center(
child: Padding(
padding: EdgeInsets.all(10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
'加载中..',
style: TextStyle(fontSize: 16.0),
),
CircularProgressIndicator(
strokeWidth: 1.0,
)
],
),
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'下拉刷新,上拉加载更多',
style: TextStyle(color: Colors.black, fontSize: 18.0),
),
centerTitle: true,
elevation: 0,
backgroundColor: Color(0xffeded),
),
body: RefreshIndicator(
onRefresh: onRefreshData,
child: ListView.builder(
itemBuilder: renderListItem,
itemCount: list.length + 1,
controller: scrollController,
),
),
);
}
} dart笔记14:flutter上拉刷新下拉加载示例
dart笔记14:flutter上拉刷新下拉加载示例,通过RefreshIndicator组件,来监听下拉刷新,重新赋值给liseView,通过listView的controller,监听滚动,判断scrollController.position.pixels ==
scrollController.position.maxScrollExtent,即是否滚动到底部,来实现上拉加载,注意,在组件dispose时,scrollController也要跟着销毁:
