Flutter 16: 圖解 ListView 異步加載資料與 Loading 等待

小菜前兩天再學 ListView 時，整理了一下在清單中展示多種不同 item 樣式，今天繼續深入學習異步請求資料并加載新聞清單以及初始進入頁面的 loading 等小知識點。暫時還沒有學習下拉重新整理與上劃加載更多。

一. 異步請求資料 async + wait

小菜在前一篇關于

中整理過基本的異步使用方法；小菜在學習中發現有兩個小地方需要注意一下：

使用 StatefulWidget 時，一定一定不要忘記 setState(() {})；
小菜準備在剛進入頁面時，開啟異步請求資料，可以在 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'];
  }
}

三. 清單加載資料

小菜每次寫 item 時都會想到 Flutter 中一切都是 Widget 的重要性，小菜建議很多公共的或重複的 Widget 完全可以提取成統一的 Widget，即友善管理也會大幅度減少代碼量。

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"；
在相應的 .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 時間不長，還有很多不清楚和不了解的地方，如果又不對的地方還希望多多指出。以下是小菜公衆号，歡迎閑來吐槽～

Flutter 16: 圖解 ListView 異步加載資料與 Loading 等待

一. 異步請求資料 async + wait

二. json 資料解析

三. 清單加載資料

四. loading 提醒

內建步驟：

繼續閱讀

Json 的三種解析方式Json簡介Json的三種解析方式

JSON三種建立方式

SpringMVC 傳回json的兩種方式

json傳輸資料解決中文亂碼問題

Python程式可列印今天的年，月和日

關于 underscore 中模闆引擎的應用示範樣例

underscore 模闆标簽修改。

Ajax——模闆引擎

使用underscore的template自定義模闆

underscore模闆功能的使用和學習

[HTML5]自定義屬性 data-* 和 jQuery.data 詳解

七牛雲-C#SDK-上傳-前期準備

Future和async(異步函數)、await(同步等待)

vue-cli簡介（中文翻譯）

Ajax發送和擷取json資料到Spring mvc 1.spring mvc後端2.web前段

JSONObject包導入異常 java.lang.NoClassDefFoundErrorweb項目的導入包的問題