flutter实战3:剖析HTTP要求数据和制造消息分类列表

当我们搭建好了全部APP的页面框架,如今我往Tab页里加点东西:种种分类的消息列表。也能够参考我的Git,上面有要点解释。

《flutter实战3:剖析HTTP要求数据和制造消息分类列表》

由于须要要求外部数据,因而引入一个较为轻易的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<NewsList>{
  ...
  @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<NewsTab> myTabs = <NewsTab>[
    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实战3:剖析HTTP要求数据和制造消息分类列表》

细致是怎样初始化数据的,第三步会讲到,踩了不少坑。这里的重点是,Flutter首倡数据驱动组件的建立,组件本身没法触发动态建立对象,只要经由过程数据绑定的体式格局,完成对象的重绘和动态加载,道理和react相似,比方:

《flutter实战3:剖析HTTP要求数据和制造消息分类列表》

第三步

到了这一步,完整进入踩坑形式。

  • 踩坑1 http和httpclient都是IO异步操纵,其内置的要求函数的返回值是Future范例对象,须要提早声明定义范例如:Future<String>,返回值也须要await异步处置惩罚后才能够转换成须要的数据范例:

《flutter实战3:剖析HTTP要求数据和制造消息分类列表》

上图中列举了两种要领,发起运用下面那种,由于假如能从返回值中提取要求猎取的数据,即可将一切的http要求封装到API文件中去,没必要写在页面代码中,缘由人人都懂的。
注重在setState()之前有一句if(!mounted) return,由于异步要求数据和控件的衬着是同时举行的,假如代码已实行到了setState,然则数据还没有猎取到,此时setState触发的控件衬着就会报错,为了防止这类空值毛病,在setState之前先推断空间是不是已衬着完成,mountedFlutter内置的当前控件的状况标识,记着就好。

  • 踩坑2 在ListView直属的Column内里不能用Expanded控件

《flutter实战3:剖析HTTP要求数据和制造消息分类列表》

图中的提醒说运用Flexible控件更佳,但是实际上Flexible也会报错。报错的英文也许意义是ListView控件天生未知长度的列表时,总是会自动紧缩每一个子元素的高度,而ExpandedFlexible都是能够自在伸缩的控件,形成ListView的子元素没法肯定绘制的高度,为了使超越屏幕宽度的消息标题自动换行,这个时刻用ListTile顶替一下吧。

  • 踩坑3 处置惩罚差别消息图片数目不一致的题目

《flutter实战3:剖析HTTP要求数据和制造消息分类列表》

如上图,肯定是不可的,控件的子元素是不允许为空的,因而运用前提推断的体式格局封装一下:

《flutter实战3:剖析HTTP要求数据和制造消息分类列表》

  • 踩坑3 深入体味map数组和Object数组的运用,newsinfo.["title"]newsinfo.title二者的newsinfo范例是不一样的,细致照样到源码中去体味吧,注重对照newsinfomyTab这两个的用法。

此次页面写的异常辛劳,而且还没完成转动革新或顶部下拉革新的结果,下一篇再更吧,另有许多要点我在源码中有标识,能够去我的Git中逐步品尝,本日就更到这里,滚去睡觉,真的来不起了。

感谢人人的支撑,请关注我的Flutter圈子,多多投稿,也能够到场flutter 中文社区(官方QQ群:338252156)配合生长,感谢人人~

    原文作者:燃烧的鱼丸
    原文地址: https://segmentfault.com/a/1190000014149087
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞