Flutter 的setState与FutureBuilder及EasyRefresh示例
2024-08-29 07:15:01
用setState改变状态
class CpwsList extends StatefulWidget {
_CpwsListState createState() => _CpwsListState();
}
class _CpwsListState extends State<CpwsList> {
int page = ;
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(),
margin: EdgeInsets.only(top:),
child: ListView.builder(
itemCount: hotList.length,
itemBuilder: (context, index) {
final Map<String, dynamic> item = (hotList)[index];
return Container(
margin: EdgeInsets.fromLTRB(, , , ),
child: Column(
children: <Widget>[
Container(
alignment: Alignment.centerLeft,
child: Text('${item["title"]}',style: TextStyle(fontSize: ScreenUtil().setSp()),),
),
Container(
padding: EdgeInsets.only(top:),
alignment: Alignment.centerLeft,
child: Text('${item["caseno"]}'),
),
Container(
padding: EdgeInsets.only(top:),
alignment: Alignment.centerLeft,
child: Row(
children: <Widget>[
Expanded(
child:Text('${item["court"]}',style: TextStyle(fontSize: ScreenUtil().setSp(),color:Colors.black38)),
),
Text('${item["judgedate"]}',style: TextStyle(fontSize: ScreenUtil().setSp(),color:Colors.black38)),
],
),
),
],
),
);
}
)
);
}
}
再添加上拉加载和下拉刷新，代码如下：
class CpwsList extends StatefulWidget {
_CpwsListState createState() => _CpwsListState();
}
class _CpwsListState extends State<CpwsList> {
int page = ;
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(),
margin: EdgeInsets.only(top:),
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(, , , ),
child: Column(
children: <Widget>[
Container(
alignment: Alignment.centerLeft,
child: Text('${item["title"]}',style: TextStyle(fontSize: ScreenUtil().setSp()),),
),
Container(
padding: EdgeInsets.only(top:),
alignment: Alignment.centerLeft,
child: Text('${item["caseno"]}'),
),
Container(
padding: EdgeInsets.only(top:),
alignment: Alignment.centerLeft,
child: Row(
children: <Widget>[
Expanded(
child:Text('${item["court"]}',style: TextStyle(fontSize: ScreenUtil().setSp(),color:Colors.black38)),
),
Text('${item["judgedate"]}',style: TextStyle(fontSize: ScreenUtil().setSp(),color:Colors.black38)),
],
),
),
],
),
);
}
),
onRefresh: () async {
await new Future.delayed(const Duration(seconds: ), () {
setState(() {
hotList.clear();
page = ;
_getList();
});
});
},
loadMore: () async {
await new Future.delayed(const Duration(seconds: ), () {
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(),
margin: EdgeInsets.only(top:),
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(, , , ),
child: Column(
children: <Widget>[
Container(
alignment: Alignment.centerLeft,
child: Text('${item["title"]}',style: TextStyle(fontSize: ScreenUtil().setSp()),),
),
Container(
padding: EdgeInsets.only(top:),
alignment: Alignment.centerLeft,
child: Text('${item["caseno"]}'),
),
Container(
padding: EdgeInsets.only(top:),
alignment: Alignment.centerLeft,
child: Row(
children: <Widget>[
Expanded(
child:Text('${item["court"]}',style: TextStyle(fontSize: ScreenUtil().setSp(),color:Colors.black38)),
),
Text('${item["judgedate"]}',style: TextStyle(fontSize: ScreenUtil().setSp(),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 = ;
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();
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(),
margin: EdgeInsets.only(top:),
child: FutureBuilder( //异步请求再渲染 不用setState改变状态
future: getDataFuture,
builder: (context,AsyncSnapshot async){
//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(, , , ),
child: Column(
children: <Widget>[
Container(
alignment: Alignment.centerLeft,
child: Text('${item["title"]}',style: TextStyle(fontSize: ScreenUtil().setSp()),),
),
Container(
padding: EdgeInsets.only(top:),
alignment: Alignment.centerLeft,
child: Text('${item["caseno"]}'),
),
Container(
padding: EdgeInsets.only(top:),
alignment: Alignment.centerLeft,
child: Row(
children: <Widget>[
Expanded(
child:Text('${item["court"]}',style: TextStyle(fontSize: ScreenUtil().setSp(),color:Colors.black38)),
),
Text('${item["judgedate"]}',style: TextStyle(fontSize: ScreenUtil().setSp(),color:Colors.black38)),
],
),
),
],
),
);
}
),
onRefresh: () async {
await new Future.delayed(const Duration(seconds: ), () {
setState(() {
hotList.clear();
page = ;
getDataFuture = _getList();
});
});
},
loadMore: () async {
await new Future.delayed(const Duration(seconds: ), () {
setState(() {
page++;
getDataFuture = _getList();
});
});
},
);
}else{
return Center(
child: Text('加载中...'),
);
}
}
),
);
}
}
注意：getDataFuture = _getList();
最后把子项剥离出来，单独写一个Widget，方便InkWell。
Widget _cpwsitem(Map item, index) {
return InkWell(
onTap: () {},
child: Column(
children: <Widget>[
Container(
alignment: Alignment.centerLeft,
child: Text(
'${item["title"]}',
style: TextStyle(fontSize: ScreenUtil().setSp()),
),
),
Container(
padding: EdgeInsets.only(top: ),
alignment: Alignment.centerLeft,
child: Text('${item["caseno"]}'),
),
Container(
padding: EdgeInsets.only(top: ),
alignment: Alignment.centerLeft,
child: Row(
children: <Widget>[
Expanded(
child: Text(
'${item["court"]}',
style: TextStyle(fontSize: ScreenUtil().setSp(), color: Colors.black38)
),
),
Text(
'${item["judgedate"]}',
style: TextStyle(fontSize: ScreenUtil().setSp(), color: Colors.black38)
),
],
),
),
],
),
);
}
然后把上面Container的child改为：
child: _cpwsitem(item, index)
最新文章
- jqgrid笔记
- Caused by: java.lang.NoClassDefFoundError:
- 超牛的VS菜单
- 0022 Java学习笔记-面向对象-继承、多态、组合
- iOS开发——UI基础-按钮内边距，图片拉伸
- 8. 星际争霸之php设计模式--享元模式
- 使用generator自动生成Mybatis映射配置文件
- PHP学习笔记 - 入门篇（3）
- HDU1257-最少拦截系统
- linux 软连接 硬连接
- （转载）Sybase:bcp命令参考
- Ocelot中文文档-认证
- Mysql 中的日期时间字符串查询
- java.lang.IllegalArgumentException: There is no PasswordEncoder mapped for the id "null"报错
- zepto 事件分析1($.Event)
- VMWARE中NAT下获取不到IP
- mongo aggregate 用法记录
- mongodb命令（持续更新）
- docker之compose 编排项目
- LPC-LINK 2 Board IO