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 ...
随机推荐
- Angular 使用教程
1.下载node.js,然后一直安装,可以修改一下node.js文件安装路径 查看是否node.js安装成功,在运行——cmd中输入以下代码.如果安装成功,则会显示出node.js的版本号 node ...
- 003 Python基本语法元素
目录 一.概要 1.1 方法论 1.2 实践能力 一.概要 程序设计基本方法:https://www.cnblogs.com/nickchen121/p/11164043.html Python开发环 ...
- 每天学会一点点(重写equals一定要重写hashcode)
package com.example.demo.javaError; import java.util.HashMap; /** * Created by yyy on 2019/01/24. */ ...
- Android-WebView支持input file启用相机/选取照片
webview要调起input-file拍照或者选取文件功能,可以在webview.setWebChromeClient方法中重写指定的方法,来拦截webview的input事件,并做我们相应的操作. ...
- 小程序组件 scroll-view 横向滚动条无效
小程序组件 scroll-view 中分别有上下竖向滑动和左右横向滑动,在这次项目中刚好需要用到横向滑动,但在测试过程中发现横向滑动没有了效果(静止在那里没移动过,并且换行了),经调试发现: 1.sc ...
- Winform中怎样根据Name获取同窗体的控件
场景 在同一个Winform窗体中,点击一个Button按钮时, 获取同窗体的其他控件的属性. 首先需要对要获取的控件赋予Name属性,然后就可以通过Name进行获取. 实现 在Button的点击事件 ...
- Spring Boot 入门之 Cache 篇（四）
博客地址:http://www.moonxy.com 一.前言 Spring Cache 对 Cahce 进行了抽象,提供了 @Cacheable.@CachePut.@CacheEvict 等注解. ...
- PyCharm2019激活
PyCharm下载地址:https://www.jetbrains.com/pycharm/download/ 永久激活 这里主要介绍永久激活的方式,永久激活后,就可以放心使用了,一劳永逸,5分钟就能 ...
- [Optimized Python] 17 - Performance bottle-neck
前言 对于一门编程语言,没接触到“优化”和“库代码”的源码理解程度,不足以谈“掌握”二字. 本篇的学习笔记,同时也意味着自己终于触及到了Python的junior国际水准.(joke) 要学的东西有很 ...
- JQuery对于动态生成的标签绑定事件失效
JQuery对整个html文档进行dom操作后,我们要想动态绑定事件,有两种方法 1.在进行dom操作时,在标签中写上onclick="afun()" 2.利用document的操 ...