Flutter 的setState与FutureBuilder及EasyRefresh示例

其他 2019-10-17 14:50:46 阅读次数: 0

用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(() {
              hotList.clear();
              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>(); //定义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(1000),
      margin: EdgeInsets.only(top:15),
      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(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(() {
                        hotList.clear();
                        page = 1;
                        getDataFuture = _getList();
                    });
                  });
                },
                loadMore: () async {
                  await new Future.delayed(const Duration(seconds: 1), () {
                    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(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)
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

然后把上面Container的child改为：

child: _cpwsitem(item, index)

猜你喜欢

转载自www.cnblogs.com/joe235/p/11652784.html
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022