flutter實(shí)戰(zhàn)3：解析HTTP請(qǐng)求數(shù)據(jù)和制作新聞分類列表

BicycleWarrior 發(fā)布于2019-08-22 15:58 / 2525人閱讀

摘要：當(dāng)我們搭建好了整個(gè)的頁(yè)面框架，現(xiàn)在我往頁(yè)里加點(diǎn)東西各種分類的新聞列表。由于需要請(qǐng)求外部數(shù)據(jù)，因此引入一個(gè)較為方便的庫(kù)。于是乎，在初始化對(duì)象時(shí)發(fā)起請(qǐng)求應(yīng)該是個(gè)不錯(cuò)的辦法具體是怎么初始化數(shù)據(jù)的，第三步會(huì)講到，踩了不少坑。

當(dāng)我們搭建好了整個(gè)APP的頁(yè)面框架，現(xiàn)在我往Tab頁(yè)里加點(diǎn)東西：各種分類的新聞列表。也可以參考我的Git，上面有要點(diǎn)注釋。

由于需要請(qǐng)求外部數(shù)據(jù)，因此引入一個(gè)較為方便的http庫(kù)。官方示例的httpClient也是可以的，但是坑略多，待會(huì)兒講。

第一步

調(diào)整代碼結(jié)構(gòu)，定義一個(gè)Tab頁(yè)內(nèi)通用的列表對(duì)象，這種場(chǎng)景下使用ListView.builder()創(chuàng)建不定長(zhǎng)度的列表：

//因?yàn)榱斜淼拈L(zhǎng)度不定，因此需要用有狀態(tài)類來承載列表
class NewsList extends StatefulWidget{
  final String newsType;    //新聞?lì)愋?  @override
  NewsList({Key key, this.newsType} ):super(key:key);

  _NewsListState createState() => new _NewsListState();
}

class _NewsListState extends State{
  ...
  @override
  Widget build(BuildContext context){
    return new ListView.builder(        //ListView.builder非常適合用于創(chuàng)建不確定長(zhǎng)度的的列表
        padding: const EdgeInsets.all(16.0),
        itemCount: data == null ? 0 : data.length,
        itemBuilder: (context, i) {
          return _newsRow(data[i]);//把數(shù)據(jù)項(xiàng)塞入ListView中
        }
      );
  }
  ...
}

將Tab頁(yè)的數(shù)據(jù)表達(dá)進(jìn)行結(jié)構(gòu)化處理，在最外層定義新聞Tab頁(yè)的類，方便后面使用：

//定義TAB頁(yè)對(duì)象，這樣做的好處就是，可以靈活定義每個(gè)tab頁(yè)用到的對(duì)象，可結(jié)合Iterable對(duì)象使用，以后講
class NewsTab {
  String text;
  NewsList newsList;
  NewsTab(this.text,this.newsList);
}

到_MyTabbedPageState對(duì)象中實(shí)例化這些Tab:

//將每個(gè)Tab頁(yè)都結(jié)構(gòu)化處理下，由于http的請(qǐng)求需要傳入新聞?lì)愋偷膮?shù)newsType，因此將新聞?lì)愋蛥?shù)值作為對(duì)象屬性傳入Tab中
  final List myTabs = [
    new NewsTab("頭條",new NewsList(newsType: "toutiao")),    //拼音就是參數(shù)值
    new NewsTab("社會(huì)",new NewsList(newsType: "shehui")),
    new NewsTab("國(guó)內(nèi)",new NewsList(newsType: "guonei")),
    new NewsTab("國(guó)際",new NewsList(newsType: "guoji")),
    new NewsTab("娛樂",new NewsList(newsType: "yule")),
    new NewsTab("體育",new NewsList(newsType: "tiyu")),
    new NewsTab("軍事",new NewsList(newsType: "junshi")),
    new NewsTab("科技",new NewsList(newsType: "keji")),
    new NewsTab("財(cái)經(jīng)",new NewsList(newsType: "caijing")),
    new NewsTab("時(shí)尚",new NewsList(newsType: "shishang")),
  ];

第二步

由于重新了Tabs，原來的TabBar和TabBarView獲取對(duì)應(yīng)值的方式也發(fā)生了改變，用map+toList方法處理下：

@override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        backgroundColor: Colors.orangeAccent,
        title: new TabBar(
          controller: _tabController,
          tabs: myTabs.map((NewsTab item){      //NewsTab可以不用聲明
            return new Tab(text: item.text==null?"錯(cuò)誤":item.text);
          }).toList(),    //記住要用toList()轉(zhuǎn)換一下map的結(jié)果，否則會(huì)由于類型不匹配而報(bào)錯(cuò)
          indicatorColor: Colors.white,
          isScrollable: true,   //水平滾動(dòng)的開關(guān)，開啟后Tab標(biāo)簽可自適應(yīng)寬度并可橫向拉動(dòng)，并自動(dòng)從左到右排列，默認(rèn)關(guān)閉
        ),
      ),
      body: new TabBarView(
        controller: _tabController,
        children: myTabs.map((item) {
          return item.newsList; //使用參數(shù)值
        }).toList(),
      ),
    );
  }

以上對(duì)新聞頁(yè)面的結(jié)構(gòu)進(jìn)行了重構(gòu)，重頭戲就是完善NewsList對(duì)象。于是乎，在初始化NewsList對(duì)象時(shí)發(fā)起HTTP請(qǐng)求應(yīng)該是個(gè)不錯(cuò)的辦法：

具體是怎么初始化數(shù)據(jù)的，第三步會(huì)講到，踩了不少坑。這里的重點(diǎn)是，F(xiàn)lutter提倡數(shù)據(jù)驅(qū)動(dòng)組件的創(chuàng)建，組件自己無法觸發(fā)動(dòng)態(tài)創(chuàng)建對(duì)象，只有通過數(shù)據(jù)綁定的方式，實(shí)現(xiàn)對(duì)象的重繪和動(dòng)態(tài)加載，原理和react類似，比如：

第三步

到了這一步，完全進(jìn)入踩坑模式。

踩坑1 http和httpclient都是IO異步操作，其內(nèi)置的請(qǐng)求函數(shù)的返回值是Future類型對(duì)象，需要提前聲明定義類型如：Future，返回值也需要await異步處理后才可以轉(zhuǎn)換成需要的數(shù)據(jù)類型：

上圖中列舉了兩種方法，建議使用下面那種，因?yàn)槿绻軓姆祷刂抵刑崛≌?qǐng)求獲取的數(shù)據(jù)，即可將所有的http請(qǐng)求封裝到API文件中去，不必寫在頁(yè)面代碼中，原因大家都懂的。
注意在setState()之前有一句if(!mounted) return，因?yàn)楫惒秸?qǐng)求數(shù)據(jù)和控件的渲染是同時(shí)進(jìn)行的，如果代碼已經(jīng)執(zhí)行到了setState，但是數(shù)據(jù)還沒有獲取到，此時(shí)setState觸發(fā)的控件渲染就會(huì)報(bào)錯(cuò)，為了避免這種空值錯(cuò)誤，在setState之前先判斷空間是否已經(jīng)渲染完成，mounted即Flutter內(nèi)置的當(dāng)前控件的狀態(tài)標(biāo)識(shí)，記住就好。

踩坑2 在ListView直屬的Column里面不能用Expanded控件

圖中的提示說使用Flexible控件更佳，然而實(shí)際上Flexible也會(huì)報(bào)錯(cuò)。報(bào)錯(cuò)的英文大概意思是ListView控件生成未知長(zhǎng)度的列表時(shí)，總是會(huì)自動(dòng)壓縮每一個(gè)子元素的高度，而Expanded和Flexible都是可以自由伸縮的控件，造成ListView的子元素?zé)o法確定繪制的高度，為了使超出屏幕寬度的新聞標(biāo)題自動(dòng)換行，這個(gè)時(shí)候用ListTile頂替一下吧。

踩坑3 處理不同新聞圖片數(shù)量不一致的問題

如上圖，肯定是不行的，控件的子元素是不允許為空的，于是使用條件判斷的方式封裝一下：

踩坑3 深刻體會(huì)map數(shù)組和Object數(shù)組的使用，newsinfo.["title"]和newsinfo.title兩者的newsinfo類型是不一樣的，詳細(xì)還是到源碼中去體會(huì)吧，注意對(duì)比newsinfo和myTab這兩個(gè)的用法。

這次頁(yè)面寫的非常辛苦，而且還沒實(shí)現(xiàn)滾動(dòng)刷新或頂部下拉刷新的效果，下一篇再更吧，還有很多要點(diǎn)我在源碼中有標(biāo)識(shí)，可以去我的Git中慢慢品味，今天就更到這里，滾去睡覺，真的來不起了。

感謝大家的支持，請(qǐng)關(guān)注我的Flutter圈子，多多投稿，也可以加入flutter 中文社區(qū)（官方QQ群：338252156）共同成長(zhǎng)，謝謝大家~