和尚前两天再学 ListView 时，整理了一下在列表中展现多种不一样 item 样式，今天继续深刻学习异步请求数据并加载新闻列表以及初始进入页面的 loading 等小知识点。暂时尚未学习下拉刷新与上划加载更多。json
一. 异步请求数据 async + wait
和尚在前一篇关于网络请求小博客中整理过基本的异步使用方法；和尚在学习中发现有两个小地方须要注意一下：微信
使用 StatefulWidget 时，必定必定不要忘记 setState(() {})；网络
和尚准备在刚进入页面时，开启异步请求数据，能够在 initState() 中进行操做，以下：app
@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 文件，须要注意的是，若实体类中有列表，必定要注意判空，以下：async
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'];
}
}
三. 列表加载数据
和尚每次写 item 时都会想到 Flutter 中一切都是 Widget 的重要性，和尚建议不少公共的或重复的 Widget 彻底能够提取成统一的 Widget，即方便管理也会大幅度减小代码量。ide
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),),
],
),
);
}
和尚处理成在没有加载出列表数据以前添加一个 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;
}
四. loading 提醒
和尚在加载数据以后发现，网络情况不佳或数据量大时都应有 loading 提醒，尽可能给用户一个良好的体验。
和尚偷了个懒，借用一个三方库 flutter_spinkit，这个 loading 库集成简单并且效果多样，基本包含平常中常见的样式。测试
集成步骤：
pubspec.yaml 中添加 flutter_spinkit: "^2.1.0"；flex
在相应的 .dart 文件中添加引用 import 'package:flutter_spinkit/flutter_spinkit.dart';
添加须要展现的样式：SpinKit + Wave() 方式，同时与官网的使用有点区别，官网中用 width 和 height 来设置宽高，可是和尚在测试过程当中，源码中提供了 size 方法，一个属性便可。
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,),
],
)
和尚刚接触 Flutter 时间不长，还有不少不清楚和不理解的地方，若是又不对的地方还但愿多多指出。如下是和尚公众号，欢迎闲来吐槽～
本文分享自微信公众号 - 阿策小和尚（gh_8297e718c166）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。