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 ...
随机推荐
- 最佳内存缓存框架Caffeine
Caffeine是一种高性能的缓存库,是基于Java 8的最佳(最优)缓存框架. Cache(缓存),基于Google Guava,Caffeine提供一个内存缓存,大大改善了设计Guava's ca ...
- STL 补档
STL 补档 1.vector 作用:它能够像容器一样存放各种类型的对象,简单地说,vector是一个能够存放任意类型的动态数组,能够增加和压缩数据. vector在C++标准模板库中的部分内容,它是 ...
- AD 域服务简介（三）- Java 对 AD 域用户的增删改查操作
博客地址:http://www.moonxy.com 关于AD 域服务器搭建及其使用,请参阅:AD 域服务简介(一) - 基于 LDAP 的 AD 域服务器搭建及其使用 Java 获取 AD 域用户, ...
- TestNG（十四） 线程测试
package com.course.testng.thread; import org.testng.annotations.Test; public class multiThread { @Te ...
- 2019-2020-1 20199314 <Linux内核原理与分析>第一周作业
前言 本周对实验楼的Linux基础入门进行了学习,目前学习到实验九完成到挑战二. 学习和实验内容 快速学习了Linux系统的发展历程及其简介,学习了下的变量.用户权限管理.文件打包及压缩.常用命令的和 ...
- .netCore+Vue 搭建的简捷开发框架 （2）--仓储层实现和EFCore 的使用
书接上文,继续搭建我们基于.netCore 的开发框架.首先是我们的项目分层结构. 这个分层结构,是参考张老师的分层结构,但是实际项目中,我没有去实现仓储模型.因为我使用的是EFCore ,最近也一直 ...
- MySQL中常用到的关于时间的SQL
-- 今天 SELECT DATE_FORMAT(NOW(),'%Y-%m-%d 00:00:00') AS dayStart;SELECT DATE_FORMAT(NOW(),'%Y-%m-%d 2 ...
- 深入全面理解面向对象的 JavaScript
深入全面理解面向对象的 JavaScript (原著: 曾 滢, 软件工程师, IBM,2013 年 4 月 17 日) JavaScript 函数式脚本语言特性以及其看似随意的编写风格,导致长期以来 ...
- tomcat 报错出现 jar not loaded. See Servlet Spec 2.3, section 9.7.2. Offending class: javax/servlet/Servlet.class
这是你导入的jar的问题 一般情况下是导入的包tomcat已经存在 也就是说 不需要你再次导入 所以你现在要做的是删除你所导的包 解决方案:删除你的web项目导入的这两个jar文件 jsp-api.j ...
- 从 Int 到 Integer 对象，细细品来还是有不少东西
int 是 Java 八大原始类型之一,是 Java 语言中为数不多不是对象的东西,Integer 是 int 的包装类,里面使用了一个 int 类型的变量来存储数据,提供了一些整数之间的常用操作,常 ...