flutter實戰3：解析HTTP請求數據和制作新聞分類列表

BicycleWarrior 發布于2019-08-22 15:58 / 2438人閱讀

摘要：當我們搭建好了整個的頁面框架，現在我往頁里加點東西各種分類的新聞列表。由于需要請求外部數據，因此引入一個較為方便的庫。于是乎，在初始化對象時發起請求應該是個不錯的辦法具體是怎么初始化數據的，第三步會講到，踩了不少坑。

當我們搭建好了整個APP的頁面框架，現在我往Tab頁里加點東西：各種分類的新聞列表。也可以參考我的Git，上面有要點注釋。

由于需要請求外部數據，因此引入一個較為方便的http庫。官方示例的httpClient也是可以的，但是坑略多，待會兒講。

第一步

調整代碼結構，定義一個Tab頁內通用的列表對象，這種場景下使用ListView.builder()創建不定長度的列表：

//因為列表的長度不定，因此需要用有狀態類來承載列表
class NewsList extends StatefulWidget{
  final String newsType;    //新聞類型
  @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非常適合用于創建不確定長度的的列表
        padding: const EdgeInsets.all(16.0),
        itemCount: data == null ? 0 : data.length,
        itemBuilder: (context, i) {
          return _newsRow(data[i]);//把數據項塞入ListView中
        }
      );
  }
  ...
}

將Tab頁的數據表達進行結構化處理，在最外層定義新聞Tab頁的類，方便后面使用：

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

到_MyTabbedPageState對象中實例化這些Tab:

//將每個Tab頁都結構化處理下，由于http的請求需要傳入新聞類型的參數newsType，因此將新聞類型參數值作為對象屬性傳入Tab中
  final List myTabs = [
    new NewsTab("頭條",new NewsList(newsType: "toutiao")),    //拼音就是參數值
    new NewsTab("社會",new NewsList(newsType: "shehui")),
    new NewsTab("國內",new NewsList(newsType: "guonei")),
    new NewsTab("國際",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("財經",new NewsList(newsType: "caijing")),
    new NewsTab("時尚",new NewsList(newsType: "shishang")),
  ];

第二步

由于重新了Tabs，原來的TabBar和TabBarView獲取對應值的方式也發生了改變，用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?"錯誤":item.text);
          }).toList(),    //記住要用toList()轉換一下map的結果，否則會由于類型不匹配而報錯
          indicatorColor: Colors.white,
          isScrollable: true,   //水平滾動的開關，開啟后Tab標簽可自適應寬度并可橫向拉動，并自動從左到右排列，默認關閉
        ),
      ),
      body: new TabBarView(
        controller: _tabController,
        children: myTabs.map((item) {
          return item.newsList; //使用參數值
        }).toList(),
      ),
    );
  }

以上對新聞頁面的結構進行了重構，重頭戲就是完善NewsList對象。于是乎，在初始化NewsList對象時發起HTTP請求應該是個不錯的辦法：

具體是怎么初始化數據的，第三步會講到，踩了不少坑。這里的重點是，Flutter提倡數據驅動組件的創建，組件自己無法觸發動態創建對象，只有通過數據綁定的方式，實現對象的重繪和動態加載，原理和react類似，比如：

第三步

到了這一步，完全進入踩坑模式。

踩坑1 http和httpclient都是IO異步操作，其內置的請求函數的返回值是Future類型對象，需要提前聲明定義類型如：Future，返回值也需要await異步處理后才可以轉換成需要的數據類型：

上圖中列舉了兩種方法，建議使用下面那種，因為如果能從返回值中提取請求獲取的數據，即可將所有的http請求封裝到API文件中去，不必寫在頁面代碼中，原因大家都懂的。
注意在setState()之前有一句if(!mounted) return，因為異步請求數據和控件的渲染是同時進行的，如果代碼已經執行到了setState，但是數據還沒有獲取到，此時setState觸發的控件渲染就會報錯，為了避免這種空值錯誤，在setState之前先判斷空間是否已經渲染完成，mounted即Flutter內置的當前控件的狀態標識，記住就好。

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

圖中的提示說使用Flexible控件更佳，然而實際上Flexible也會報錯。報錯的英文大概意思是ListView控件生成未知長度的列表時，總是會自動壓縮每一個子元素的高度，而Expanded和Flexible都是可以自由伸縮的控件，造成ListView的子元素無法確定繪制的高度，為了使超出屏幕寬度的新聞標題自動換行，這個時候用ListTile頂替一下吧。

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

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

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

這次頁面寫的非常辛苦，而且還沒實現滾動刷新或頂部下拉刷新的效果，下一篇再更吧，還有很多要點我在源碼中有標識，可以去我的Git中慢慢品味，今天就更到這里，滾去睡覺，真的來不起了。

感謝大家的支持，請關注我的Flutter圈子，多多投稿，也可以加入flutter 中文社區（官方QQ群：338252156）共同成長，謝謝大家~

GPU云服務器云服務器 python新聞分類分類列表新聞列表代碼html html列表新聞代碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93920.html

flutter實戰4：新聞列表的懶加載和下拉手勢刷新

摘要：上一篇我們實現了新聞列表，但在網絡不好的時候列表會白屏，因此為了提高使用體驗，往列表中加入懶加載效果。其次，引入一個內置的手勢控件，用于支持下拉刷新列表的效果如下圖將異步執行也進行了控件化處理，即。上一篇我們實現了新聞列表，但在網絡不好的時候列表會白屏，因此為了提高使用體驗，往列表中加入懶加載效果。其次，引入一個Flutter內置的手勢控件，用于支持下拉刷新列表的效果如下圖： sho...

AlienZHOU 2019-08-22 16:05 評論0 收藏0
高級架構師實戰：如何用最小的代價完成爬蟲需求

摘要：在系統正常運行時，可以變更爬蟲的配置，一旦實時監控爬蟲出現異常，可實時修正配置進行干預。從數據庫中實時讀取配置信息，響應業務層的配置請求。處理系統通過服務層，每次去取配置信息可能維護人員在實時修正及待抓取的列表進行處理。 showImg(https://segmentfault.com/img/bVLa4V?w=960&h=540); 一 ?緣起在我工作的多家公司，有眾多的領域，如房...

light 2019-06-24 17:53 評論0 收藏0
【Flutter 專題】15 圖解 ListView 異步加載數據與等待 #yyds干貨盤點#

摘要：小菜前兩天再學時，整理了一下在列表中展示多種不同樣式，今天繼續深入學習異步請求數據并加載新聞列表以及初始進入頁面的等小知識點。小菜剛接觸時間不長，還有很多不清楚和不理解的地方，如果又不對的地方還希望多多指出。小菜前兩天再學 ListView 時，整理了一下在列表中展示多種不同 item 樣式，今天繼續深入學習...

番茄西紅柿 2021-11-22 14:56 評論0 收藏2637
性能優化全新思路！實踐騰訊、字節、阿里、百度、網易等互聯網公司項目實戰+案例分析（附PDF源碼）

摘要：不努力不奮斗，可能就會在基層一輩子止步不前。不過，只一句，如果你還在做這一行，還是一名程序猿媛，想走上坡路的你，也許我這到手的十幾家一線互聯網公司性能優化項目實戰可能會對你有所幫助。 ...

ytwman 2021-09-24 09:48 評論0 收藏0
Android程序員完全沒時間提升自己怎么辦？

摘要：昨天有個小學弟給我發來微信，說他現在有點后悔選擇開發了，月月光不說，還加班特別嚴重，平時也沒有屬于自己的時間去學習，問我剛畢業的時候是不是這樣。每天回到出租屋都是倒頭就睡，非常累，也沒有其他時間提升自己的技術。昨天有個小學弟給我發來微信，說他現在有點后悔選擇Android開發了，月月光不說...

kohoh_ 2021-11-17 09:33 評論0 收藏0