Flutter 的setState与FutureBuilder及EasyRefresh示例
- 2019 年 10 月 11 日
- 笔记
用setState改变状态
class CpwsList extends StatefulWidget { _CpwsListState createState() => _CpwsListState(); } class _CpwsListState extends State<CpwsList> { int page = 1; List<Map> hotList = []; GlobalKey<RefreshFooterState> _footerKey = new GlobalKey<RefreshFooterState>(); //定义key var scrollController = new ScrollController(); //声明控制器变量 @override void initState() { super.initState(); _getList(); } void _getList(){ var formData = {'page':page, 'isDebug':'aa'}; request('get', 'cpwsList', formData: formData).then((val){ var data = val.toString(); //print(data); List<Map>newGoodsList = (val['data']['data'] as List).cast(); print(newGoodsList); setState(() { hotList.addAll(newGoodsList); }); }); } @override Widget build(BuildContext context) { return Container( height: ScreenUtil().setHeight(1000), margin: EdgeInsets.only(top:15), child: ListView.builder( itemCount: hotList.length, itemBuilder: (context, index) { final Map<String, dynamic> item = (hotList)[index]; return Container( margin: EdgeInsets.fromLTRB(15, 20, 15, 10), child: Column( children: <Widget>[ Container( alignment: Alignment.centerLeft, child: Text('${item["title"]}',style: TextStyle(fontSize: ScreenUtil().setSp(30)),), ), Container( padding: EdgeInsets.only(top:5), alignment: Alignment.centerLeft, child: Text('${item["caseno"]}'), ), Container( padding: EdgeInsets.only(top:5), alignment: Alignment.centerLeft, child: Row( children: <Widget>[ Expanded( child:Text('${item["court"]}',style: TextStyle(fontSize: ScreenUtil().setSp(22),color:Colors.black38)), ), Text('${item["judgedate"]}',style: TextStyle(fontSize: ScreenUtil().setSp(22),color:Colors.black38)), ], ), ), ], ), ); } ) ); } }
再添加上拉加载和下拉刷新，代码如下：
class CpwsList extends StatefulWidget { _CpwsListState createState() => _CpwsListState(); } class _CpwsListState extends State<CpwsList> { int page = 1; List<Map> hotList = []; GlobalKey<RefreshHeaderState> _headerKey = new GlobalKey<RefreshHeaderState>(); //定义key GlobalKey<RefreshFooterState> _footerKey = new GlobalKey<RefreshFooterState>(); //定义key var scrollController = new ScrollController(); //声明控制器变量 @override void initState() { super.initState(); _getList(); } void _getList(){ var formData = {'page':page, 'isDebug':'aa'}; request('get', 'cpwsList', formData: formData).then((val){ var data = val.toString(); //print(data); List<Map>newGoodsList = (val['data']['data'] as List).cast(); print(newGoodsList); setState(() { hotList.addAll(newGoodsList); }); }); } @override Widget build(BuildContext context) { return Container( height: ScreenUtil().setHeight(1000), margin: EdgeInsets.only(top:15), child: EasyRefresh( refreshHeader: ClassicsHeader(//自定义下拉刷新效果 key:_headerKey, bgColor:Colors.white, textColor: Colors.blueGrey, moreInfoColor: Colors.blueGrey, refreshingText: '加载中', //加载时显示的文字 refreshedText: '刷新成功', ), refreshFooter:ClassicsFooter( //自定义上拉加载效果 key:_footerKey, bgColor:Colors.white, textColor: Colors.blueGrey, moreInfoColor: Colors.blueGrey, showMore: true, noMoreText: '', moreInfo: '加载中', //加载时显示的文字 loadReadyText: '上拉加载...', //准备时显示的文字 ), child: ListView.builder( itemCount: hotList.length, itemBuilder: (context, index) { final Map<String, dynamic> item = (hotList)[index]; return Container( margin: EdgeInsets.fromLTRB(15, 20, 15, 10), child: Column( children: <Widget>[ Container( alignment: Alignment.centerLeft, child: Text('${item["title"]}',style: TextStyle(fontSize: ScreenUtil().setSp(30)),), ), Container( padding: EdgeInsets.only(top:5), alignment: Alignment.centerLeft, child: Text('${item["caseno"]}'), ), Container( padding: EdgeInsets.only(top:5), alignment: Alignment.centerLeft, child: Row( children: <Widget>[ Expanded( child:Text('${item["court"]}',style: TextStyle(fontSize: ScreenUtil().setSp(22),color:Colors.black38)), ), Text('${item["judgedate"]}',style: TextStyle(fontSize: ScreenUtil().setSp(22),color:Colors.black38)), ], ), ), ], ), ); } ), onRefresh: () async { await new Future.delayed(const Duration(seconds: 1), () { setState(() { page = 1; _getList(); }); }); }, loadMore: () async { await new Future.delayed(const Duration(seconds: 1), () { setState(() { page++; _getList(); }); }); }, ) ); } }
异步请求再渲染 不用setState改变状态
class CpwsList extends StatefulWidget { _CpwsListState createState() => _CpwsListState(); } class _CpwsListState extends State<CpwsList> { @override Widget build(BuildContext context) { var formData = {'isDebug':'aa'}; return Container( height: ScreenUtil().setHeight(1000), margin: EdgeInsets.only(top:15), child: FutureBuilder( //异步请求再渲染 不用setState改变状态 future: request('get','cpwsList',formData:formData), //可选参数formData:formData=属性名:属性值 builder: (context, snapshot){ //snapshot就是_calculation在时间轴上执行过程的状态快照 if(snapshot.hasData){ //判断有没有值 //print(snapshot.data); //数据处理 var data = snapshot.data; List<Map> cpwsData = (data['data']['data'] as List).cast(); //print(chinaData); return ListView.builder( itemCount: cpwsData.length, itemBuilder: (context, index) { final Map<String, dynamic> item = (cpwsData)[index]; return Container( margin: EdgeInsets.fromLTRB(15, 20, 15, 10), child: Column( children: <Widget>[ Container( alignment: Alignment.centerLeft, child: Text('${item["title"]}',style: TextStyle(fontSize: ScreenUtil().setSp(30)),), ), Container( padding: EdgeInsets.only(top:5), alignment: Alignment.centerLeft, child: Text('${item["caseno"]}'), ), Container( padding: EdgeInsets.only(top:5), alignment: Alignment.centerLeft, child: Row( children: <Widget>[ Expanded( child:Text('${item["court"]}',style: TextStyle(fontSize: ScreenUtil().setSp(22),color:Colors.black38)), ), Text('${item["judgedate"]}',style: TextStyle(fontSize: ScreenUtil().setSp(22),color:Colors.black38)), ], ), ), ], ), ); } ); }else{ return Center( child: Text('加载中...'), ); } } ), ); } }
EasyRefresh + ScrollController 实现下拉刷新和上拉加载
FutureBuilder 需要结合 Future 使用，先定义一个 Future,异步网络请求。
///先定义一个 Future Future getDataFuture; ... @override void initState() { super.initState(); getDataFuture = _getList(); } //获取数据 Future _getList() async{ var formData = {'page':page, 'isDebug':'aa'}; var response = await request('get', 'cpwsList', formData: formData); //print(response); List<Map>newGoodsList = (response['data']['data'] as List).cast(); //print(newGoodsList); if(newGoodsList != null){ hotList.addAll(newGoodsList); } return hotList; }
通过 ScrollController 可以判断滚动列表是否滚动到底部，如果是，就调用上滑加载的功能获取数据即可。
var scrollController = new ScrollController(); //声明控制器变量
添加上拉加载及下拉刷新代码：
class CpwsList extends StatefulWidget { _CpwsListState createState() => _CpwsListState(); } class _CpwsListState extends State<CpwsList> { Future getDataFuture; int page = 1; List<Map> hotList = []; GlobalKey<RefreshHeaderState> _headerKey = new GlobalKey<RefreshHeaderState>(); GlobalKey<RefreshFooterState> _footerKey = new GlobalKey<RefreshFooterState>(); //定义key var scrollController = new ScrollController(); //声明控制器变量 @override void initState() { super.initState(); getDataFuture = _getList(); } //获取数据 Future _getList() async{ var formData = {'page':page, 'isDebug':'aa'}; var response = await request('get', 'cpwsList', formData: formData); //print(response); List<Map>newGoodsList = (response['data']['data'] as List).cast(); //print(newGoodsList); if(newGoodsList != null){ hotList.addAll(newGoodsList); } return hotList; } @override Widget build(BuildContext context) { return Container( height: ScreenUtil().setHeight(1000), margin: EdgeInsets.only(top:15), child: FutureBuilder( //异步请求再渲染 不用setState改变状态 future: getDataFuture, builder: (context,AsyncSnapshot async){ //snapshot就是_calculation在时间轴上执行过程的状态快照 print(async.hasData); if(async.hasData){ //判断有没有值 return EasyRefresh( refreshHeader: ClassicsHeader(//自定义下拉刷新效果 key:_headerKey, bgColor:Colors.white, textColor: Colors.blueGrey, moreInfoColor: Colors.blueGrey, refreshingText: '加载中', //加载时显示的文字 refreshedText: '刷新成功', ), refreshFooter: ClassicsFooter( //自定义refreshFooter key: _footerKey, bgColor: Colors.white, textColor: Colors.blueGrey, moreInfoColor: Colors.blueGrey,//加载时显示的文字颜色 showMore: true, noMoreText: '', moreInfo: '加载中', //加载时显示的文字 loadReadyText: '上拉加载...', //准备文字 ), child: ListView.builder( controller: scrollController, itemCount: hotList.length, itemBuilder: (context, index) { final Map<String, dynamic> item = (hotList)[index]; return Container( margin: EdgeInsets.fromLTRB(15, 20, 15, 10), child: Column( children: <Widget>[ Container( alignment: Alignment.centerLeft, child: Text('${item["title"]}',style: TextStyle(fontSize: ScreenUtil().setSp(30)),), ), Container( padding: EdgeInsets.only(top:5), alignment: Alignment.centerLeft, child: Text('${item["caseno"]}'), ), Container( padding: EdgeInsets.only(top:5), alignment: Alignment.centerLeft, child: Row( children: <Widget>[ Expanded( child:Text('${item["court"]}',style: TextStyle(fontSize: ScreenUtil().setSp(22),color:Colors.black38)), ), Text('${item["judgedate"]}',style: TextStyle(fontSize: ScreenUtil().setSp(22),color:Colors.black38)), ], ), ), ], ), ); } ), onRefresh: () async { await new Future.delayed(const Duration(seconds: 1), () { setState(() { page = 1; _getList(); }); }); }, loadMore: () async{ setState(() { page++; _getList(); }); } ); }else{ return Center( child: Text('加载中...'), ); } } ), ); } }
