当我们搭建好了全部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<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首倡数据驱动组件的建立,组件本身没法触发动态建立对象,只要经由过程数据绑定的体式格局,完成对象的重绘和动态加载,道理和react相似,比方:
第三步
到了这一步,完整进入踩坑形式。
- 踩坑1 http和httpclient都是IO异步操纵,其内置的要求函数的返回值是Future范例对象,须要提早声明定义范例如:
Future<String>
,返回值也须要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)配合生长,感谢人人~