五陵年少金市东，银鞍白马渡春风。这篇文章主要讲述Flutter 专题15 图解 ListView 异步加载数据与等待#yyds干货盘点#相关的知识，希望能为你提供帮助。
            小菜前两天再学 ListView 时，整理了一下在列表中展示多种不同 item 样式，今天继续深入学习异步请求数据并加载新闻列表以及初始进入页面的 loading 等小知识点。暂时还没有学习下拉刷新与上划加载更多。

文章图片

一. 异步请求数据 async + wait
            小菜在前一篇关于网络请求小博客中整理过基本的异步使用方法；小菜在学习中发现有两个小地方需要注意一下：

1. 使用 StatefulWidget 时，一定一定不要忘记 setState(() {})；
2. 小菜准备在刚进入页面时，开启异步请求数据，可以在 initState() 中进行操作，如下：
   

   @override void initState() { getNewsData(); }

   
   二. json 数据解析
               请求到数据之后必然得需要 json 解析，首先需要引入 import dart:convert show json; 之后，小菜主要是使用 response.body 中数据进行处理，json.decode(response.body); 将 json 转为标准的 key-value 格式；最让小菜头疼的是实体类转换，实体类的定义一定要全面且字段格式正确，不然解析出问题不容易定位。(请谅解：小菜的测试 url 无法公布)
   

   getNewsData() async { await http .get(https://...?sid=xkycs& cid=${cid}& rowNumber=${rowNumber}) .then((response) { if (response.statusCode == 200) { var jsonRes = json.decode(response.body); newsListBean = NewsListBean(jsonRes); setState(() { for (int i = 0; i < newsListBean.list.length; i++) { print("==77==${newsListBean.list[i].title}"); dataItems.add(newsListBean.list[i]); } }); } }); }

   
               小菜单独为实体类区分为一个新的 .dart 文件，需要注意的是，若实体类中有列表，一定要注意判空，如下：
   

   class NewsListBean { List< ListBean> list; int rowNumber; bool success; String msg; NewsListBean(jsonRes) { rowNumber = jsonRes[rowNumber]; success = jsonRes[success]; msg = jsonRes[msg]; list = []; if (jsonRes[list] != null) { for (var dataItem in jsonRes[list]) { list.add(new ListBean(dataItem)); } } } }

   
   

class ListBean {
int fileID;
String title;
int version;
String abstractX;
String publishTime;
String realPublishTime;
int articleType;
String pic3;
String pic2;
String pic1;
int bigPic;
String tag;
String contentUrl;
String videoImgUrl;
ListBean(jsonRes) {
fileID = jsonRes[fileID];
title = jsonRes[title];
version = jsonRes[version];
abstractX = jsonRes[abstract];
publishTime = jsonRes[publishTime];
realPublishTime = jsonRes[realPublishTime];
articleType = jsonRes[articleType];
pic3 = jsonRes[pic3];
pic2 = jsonRes[pic2];
pic1 = jsonRes[pic1];
bigPic = jsonRes[bigPic];
tag = jsonRes[tag];
contentUrl = jsonRes[contentUrl];
videoImgUrl = jsonRes[videoImgUrl];
}
}

### 三. 列表加载数据 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; 小菜每次写 item 时都会想到 Flutter 中一切都是 Widget 的重要性，小菜建议很多公共的或重复的 Widget 完全可以提取成统一的 Widget，即方便管理也会大幅度减少代码量。

【Flutter 专题15 图解 ListView 异步加载数据与等待#yyds干货盘点#】Widget buildListData(BuildContext context, ListBean listBean) {
Widget itemWidget;
if (listBean != null) {
switch (listBean.articleType) {
case 1:
itemWidget = new Card(
child: new Container(
child: new Column(
children: < Widget> [
new Row(
children: < Widget> [
new Expanded(
child: new Container(
padding: const EdgeInsets.fromLTRB(3.0, 6.0, 3.0, 0.0),
child: new Image.network( listBean.pic1, fit: BoxFit.cover, ),
height: 100.0,
),
flex: 1,
),
new Expanded(
child: new Container(
padding: const EdgeInsets.fromLTRB(3.0, 6.0, 3.0, 0.0),
child: new Image.network( listBean.pic2, fit: BoxFit.cover, ),
height: 100.0,
),
flex: 1,
),
new Expanded(
child: new Container(
padding: const EdgeInsets.fromLTRB(3.0, 6.0, 3.0, 0.0),
child: new Image.network( listBean.pic3, fit: BoxFit.cover, ),
height: 100.0,
),
flex: 1,
),
],
),
new Padding( padding: new EdgeInsets.fromLTRB(8.0, 6.0, 0.0, 6.0), child: botRow(listBean), ),
],
),
),
);
break;
case 2:
itemWidget = new Card(
child: new Column(
children: < Widget> [
new Row(
children: < Widget> [
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: < Widget> [
new Padding( padding: new EdgeInsets.fromLTRB(8.0, 6.0, 0.0, 3.0), child: new Text(listBean.title), ),
new Padding( padding: new EdgeInsets.fromLTRB(8.0, 6.0, 0.0, 3.0), child: new Text( listBean.abstractX, style: new TextStyle(fontSize: 14.0), ), ),
new Padding( padding: new EdgeInsets.fromLTRB(8.0, 6.0, 0.0, 3.0), child: botRow(listBean), ),
],
),
flex: 2,
),
new Expanded(
child: new Container(
padding: const EdgeInsets.fromLTRB(3.0, 6.0, 3.0, 6.0),
child: new Image.network( listBean.pic1, fit: BoxFit.cover, ),
height: 100.0,
),
flex: 1,
),
],
),
],
),
);
break;
default:
Widget absWi;
if (listBean.abstractX == null || listBean.abstractX.length == 0) {
absWi = new Container( width: 0.0, height: 0.0, );
} else {
absWi = new Padding( padding: new EdgeInsets.fromLTRB(0.0, 8.0, 0.0, 0.0),child: new Text( listBean.abstractX, style: new TextStyle(fontSize: 14.0), ), );
}
itemWidget = new Card(
child: new Padding(
padding: new EdgeInsets.all(10.0),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: < Widget> [
new Text( listBean.title, style: new TextStyle(fontSize: 17.0), ),
absWi,
new Padding( padding: new EdgeInsets.fromLTRB(0.0, 8.0, 0.0, 0.0), child: botRow(listBean), ),
],
),
),
);
break;
}
return itemWidget;
}
}
// 底部时间和音视频显隐性
Widget botRow(ListBean listBean) {
Widget videoWi;
if (listBean.videoImgUrl == null || listBean.videoImgUrl.length == 0) {
videoWi = new Container( width: 0.0, height: 0.0, );
} else {
videoWi = new Padding(
padding: new EdgeInsets.fromLTRB(0.0, 0.0, 6.0, 0.0),
child: new Row(
children: < Widget> [
new Padding(
padding: new EdgeInsets.fromLTRB(0.0, 2.0, 6.0, 0.0),
child: new Center( child: new Icon( Icons.queue_music, size: 13.0, color: Colors.blueAccent, ), ),
),
new Text( 音频, style: new TextStyle(fontSize: 13.0), ),
],
),
);
}
return new Padding(
padding: new EdgeInsets.fromLTRB(0.0, 8.0, 0.0, 0.0),
child: new Row(
children: < Widget> [
videoWi,
new Padding(
padding: new EdgeInsets.fromLTRB(0.0, 0.0, 6.0, 0.0),
child: new Icon( Icons.access_time, size: 13.0, color: Colors.blueAccent,),
),
new Text( listBean.publishTime, style: new TextStyle(fontSize: 13.0),),
],
),
);
}

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; 小菜处理成在没有加载出列表数据之前添加一个 loading 提醒，如下：

Widget childWidget() {
Widget childWidget;
if (dataItems != null & & dataItems.length != 0) {
childWidget = new Padding(
padding: EdgeInsets.all(6.0),
child: new ListView.builder(
itemCount: dataItems.length,
itemBuilder: (context, item) {
return buildListData(context, dataItems[item]);
},
),
);
} else {
childWidget = new Stack(
children: < Widget> [
new Padding(
padding: new EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 35.0),
child: new Center(
child: SpinKitFadingCircle(
color: Colors.blueAccent,
size: 30.0,
),
),
),
new Padding(
padding: new EdgeInsets.fromLTRB(0.0, 35.0, 0.0, 0.0),
child: new Center(
child: new Text(正在加载中，莫着急哦~),
),
),
],
);
}
return childWidget;
}

![](https://s4.51cto.com/images/blog/202111/22090007_619aeb97b858131176.jpg?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)![](https://s4.51cto.com/images/blog/202111/22090007_619aeb97acdd052317.jpg?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)![](https://s4.51cto.com/images/blog/202111/22090007_619aeb97b7b5778840.jpg?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)### 四. loading 提醒 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; 小菜在加载数据之后发现，网络状况不佳或数据量大时都应有 loading 提醒，尽量给用户一个良好的体验。 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; 小菜偷了个懒，借用一个三方库 **[flutter_spinkit](https://pub.flutter-io.cn/packages/flutter_spinkit)**，这个 loading 库集成简单而且效果多样，基本包含日常中常见的样式。![](https://s4.51cto.com/images/blog/202111/22090007_619aeb9783be457528.png?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)####集成步骤： 1. pubspec.yaml 中添加 **flutter_spinkit: "^2.1.0"**； 2. 在相应的 .dart 文件中添加引用 **import package:flutter_spinkit/flutter_spinkit.dart; ** 3. 添加需要展示的样式：SpinKit + Wave() 方式，同时与官网的使用有点区别，官网中用 width 和 height 来设置宽高，但是小菜在测试过程中，源码中提供了 size 方法，一个属性即可。![](https://s4.51cto.com/images/blog/202111/22090007_619aeb97e68722435.png?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)

new Column(
children: < Widget> [
new SpinKitRotatingPlain(color: Colors.blueAccent, size: 30.0,),
new SpinKitRotatingCircle(color: Colors.blueAccent, size: 30.0,),
new SpinKitDoubleBounce(color: Colors.blueAccent, size: 30.0,),
new SpinKitRing(color: Colors.blueAccent, size: 30.0,),
new SpinKitWave(color: Colors.blueAccent, size: 30.0,),
new SpinKitWanderingCubes(color: Colors.blueAccent, size: 30.0,),
new SpinKitFadingCube(color: Colors.blueAccent, size: 30.0,),
new SpinKitFadingFour(color: Colors.blueAccent, size: 30.0,),
new SpinKitPulse(color: Colors.blueAccent, size: 30.0,),
new SpinKitChasingDots(color: Colors.blueAccent, size: 30.0,),
new SpinKitHourGlass(color: Colors.blueAccent, size: 30.0,),
new SpinKitSpinningCircle(color: Colors.blueAccent, size: 30.0,),
],
)

![](https://s4.51cto.com/images/blog/202111/22090007_619aeb97e6cd862733.jpg?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)![](https://s4.51cto.com/images/blog/202111/22090008_619aeb9833bea10324.jpg?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)*** & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; 小菜刚接触 **Flutter** 时间不长，还有很多不清楚和不理解的地方，如果又不对的地方还希望多多指出。> 来源：阿策小和尚

推荐阅读

• 

  硬件维护需求分析
• 

  公鸽子趴窝几天下蛋 公鸽子趴窝好几天了
• 

  蜂蜜起泡沫怎么其让消失
• 

  怎样搞好宿舍人际关系
• 

  干煎带鱼做法文字 干煎带鱼做法
• 

  我来教你wps数值调节钮怎么设置
• 

  友谊的意思，友谊的解释
• 

  类似c语言的入口函数 类似c语言的入口函数有哪些
• 

  荔枝可以和绿豆一起吃吗
• 

  云逊科技的服务器表现如何？ 云逊科技服务器怎么样
• 

  关于甘肃彩礼如何举报最有效 关于甘肃彩礼如何举报，关于甘肃彩礼如何举报电话
• 

  万家乐热水器水压闪烁的原因，怎么修复与排查方法？
• 

  鸿蒙|麒麟7nm+鸿蒙系统+双OIS，跌至1548元，从高端市场跌至低端市场
• 

  鱼与熊掌不可兼得,在婚姻爱情上和金钱利益上,你会选那一个？
• 

  为什么天会下雨 天会下雨的解释
• 

  mysql使用技巧 使用mysql的工具
• 

  燃气热水器出现故障怎么解决？ 大宇燃气热水器故障
• 

  佳能MARV打印机老卡纸的故障处理方案
• 

  win10无法打开chm文件 WIN10系统chm文件打不开的处理操作方法
• 

  什么时候vivo手机能用鸿蒙，vivo什么时候更新鸿蒙

• 巧用云函数打造微信网页授权公用服务
• 一个普通的开发日常-记一次缓存问题在实际开发中的解决方案
• flutter 中的列表的性能优化前奏#yyds干货盘点#
• #聊一聊WuKong编辑器#7 赞 6 建议 5 改进
• 02~文件通配符用户及用户组
• linux之拖拽上传文件
• #yyds干货盘点# Golang Gin 框架上传介绍
• oeasy教您玩转vim - 67 - # 批量替换
• 谈ansible配置host_key_checking = False