Flutter 的setState与FutureBuilder及EasyRefresh示例
用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)
Flutter 的setState与FutureBuilder及EasyRefresh示例的更多相关文章
- Flutter easyrefresh示例 上拉加载+下拉刷新
官方示例,简单改了下,实现功能为主. 代码如下: import 'dart:async'; import 'package:flutter/material.dart'; import 'packag ...
- Flutter FutureBuilder异步请求列表示例
Flutter的FutureBuilder列表示例 import 'package:flutter/material.dart'; import '../service/service_method. ...
- Flutter 异步Future与FutureBuilder实用技巧
什么是Future? Future表示在接下来的某个时间的值或错误,借助Future我们可以在Flutter实现异步操作.它类似于ES6中的Promise,提供then和catchError的链式调用 ...
- 聊一聊Flutter的setState()
Flutter 里面包含两种widget 一种可变的,一种不可变的: 在可变的widget中可以使用 setstate(){} 函数. 官方也给出了例子: _onClick(){ setState() ...
- 【Flutter】功能型组件之异步UI更新
前言 很多时候会依赖一些异步数据来动态更新UI,比如在打开一个页面时我们需要先从互联网上获取数据,在获取数据的过程中我们显示一个加载框,等获取到数据时我们再渲染页面:又比如想展示Stream(比如文件 ...
- Flutter Web 支持现已进入稳定版
作者 / Mariam Hasnany, Product Manager, Flutter 我们对 Flutter 的愿景是成为一个可移植的 UI 框架,在全平台上构建精美的应用体验.做为 Flutt ...
- Flutter资源
目录 文章 一开始 HOWTO文档 网站/博客 高级 视频 组件 演示 UI 材料设计 图片 地图 图表 导航 验证 文字和富文本 分析.流量统计 自动构建 风格样式 媒体 音频 视频 语音 存储 获 ...
- Flutter 多引擎支持 PlatformView 以及线程合并解决方案
作者:字节移动技术-李皓骅 摘要 本文介绍了 Flutter 多引擎下,使用 PlatformView 场景时不能绕开的一个线程合并问题,以及它最终的解决方案.最终 Pull Request 已经 m ...
- textfield reload issue and other things reload problem.===================================
https://github.com/flutter/flutter/issues/18828 https://blog.csdn.net/u011272795/article/details/830 ...
随机推荐
- Python 的整数与 Numpy 的数据溢出
某位 A 同学发了我一张截图,问为何结果中出现了负数? 看了图,我第一感觉就是数据溢出了.数据超出能表示的最大值,就会出现奇奇怪怪的结果. 然后,他继续发了张图,内容是 print(100000*20 ...
- 9道JavaScript字符串类面试题
本文来源于笔者的开源项目前端面试与进阶指南 点击关注本公众号获取文档最新更新,并可以领取配套于本指南的 <前端面试手册> 以及最标准的简历模板. 解析 URL Params 为对象 let ...
- Linux下编译提示arm-none-linux-gnueabi-gcc: command not found
自己的Linux系统中已经正确安装了交叉编译器arm-2009q3,路径设置正常. 但是在使用arm-none-linux-gnueabi-gcc编译时提示 arm-none-linux-gnuea ...
- sql 多行、一行 互转
原始数据: 期望数据: IF OBJECT_ID('temp_20170701','u') IS NOT NULL DROP TABLE temp_20170701 CREATE TABLE temp ...
- 洛谷 P1091合唱队列
吾王剑之所指,吾等心之所向 ——<Fate/stay night> 题目:https://www.luogu.org/problem/P ...
- 警告:stream not available
1.修改mybatis.org//DTD Config 3.0//EN更改为mybatis.org//DTD//EN 2.将url换成http://mybatis.org/dtd/mybatis-3- ...
- 学习数据库SQL语句1
数据库一直让我很头大,正好出差有空,就重新恶补起来吧!(网站:http://www.w3school.com.cn/sql) 我准备把我每天学到的都记录下来=.= (红色字体代表关键词,蓝色字体是我个 ...
- STL迭代器
大部分ACM中使用的都是C/C++语言,但是说到C语言和C++语言的区别,却不知道. C++语言用于竞赛真的是非常方便的,里面有很多函数还有STL这个好东西,比C语言方便,比其他语言好理解. 在C语言 ...
- 44 (OC)* 野指针、空指针
一: 空指针 : 没有存储任何内存地址的指针就称为空指针(NULL指针). 被赋值为nil的指针,在没有被具体初始化之前,为nil.nil.Nil.NULL.NSNULL的含义和区别 nil:OC中的 ...
- [Leetcode] 第306题 累加数
一.题目描述 累加数是一个字符串,组成它的数字可以形成累加序列. 一个有效的累加序列必须至少包含 3 个数.除了最开始的两个数以外,字符串中的其他数都等于它之前两个数相加的和. 给定一个只包含数字 ' ...