Flutter 中刷新组件的简单使用
用到的刷新控件是 pull_to_refresh: ^1.1.5，具体的代码如下，由于代码比较少且比较简单，也就不多做解释了，效果图：
具体代码如下：
class ListViewDemo extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(title: Text('ListViewDemo')),
body: new ListViewRefreshController(),
);
}
}
class ListViewRefreshController extends StatefulWidget{
@override
State createState() => new RefreshControViewController();
}
class RefreshControViewController extends State
List
bool mounted = true;
RefreshController _refreshController = RefreshController(initialRefresh: true);
void _onRefresh() async{
await Future.delayed(Duration(milliseconds: 1000));
items = ['1','2','3','4','5','6'];
mounted = !mounted;
_refreshController.refreshCompleted();
setState(() {
});
}
void _onLoading() async{
await Future.delayed(Duration(microseconds: 1000));
items.add((items.length+1).toString());
setState(() {
});
_refreshController.loadComplete();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SmartRefresher(
enablePullDown: true,
enablePullUp: true,
header: WaterDropHeader(),
footer: CustomFooter(
builder: (BuildContext context, LoadStatus mode){
Widget body;
if (mode == LoadStatus.idle) {
body = Text('pull up load');
}else if(mode == LoadStatus.loading){
body = CupertinoActivityIndicator();
}
else if(mode == LoadStatus.failed){
body = Text("Load Failed!Click retry!");
}
else{
body = Text("No more Data");
}
return Container(
height: 55.0,
child: Center(child: body),
);
},
),
controller: _refreshController,
onRefresh: _onRefresh,
onLoading: _onLoading,
child: ListView.builder(
itemBuilder: (c,i) =>Card(child: Center(child:Text(items[i]))),
itemCount: items.length,
itemExtent: 100.0,
),
),
);
}
}