flutter TabBar+TabView的使用
2018-10-17 本文已影响1978人
神经病人思路广
第一步 添加数据
List<TabTitle> tabList = [
new TabTitle('推荐', 10),
new TabTitle('热点', 0),
new TabTitle('社会', 1),
new TabTitle('娱乐', 2),
new TabTitle('体育', 3),
new TabTitle('美文', 4),
new TabTitle('科技', 5),
new TabTitle('财经', 6),
new TabTitle('时尚', 7)
];
第二步 完成布局
class HomeState extends State<MyHomePage> with SingleTickerProviderStateMixin {
TabController mController;
List<TabTitle> tabList;
@override
void initState() {
super.initState();
initTabData();
mController = TabController(
length: tabList.length,
vsync: this,
);
}
@override
void dispose() {
super.dispose();
mController.dispose();
}
initTabData() {
tabList = [
new TabTitle('推荐', 10),
new TabTitle('热点', 0),
new TabTitle('社会', 1),
new TabTitle('娱乐', 2),
new TabTitle('体育', 3),
new TabTitle('美文', 4),
new TabTitle('科技', 5),
new TabTitle('财经', 6),
new TabTitle('时尚', 7)
];
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("首页"),
backgroundColor: Color(0xffd43d3d),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.all_inclusive),
backgroundColor: Color(0xffd43d3d),
elevation: 2.0,
highlightElevation: 2.0,
onPressed: () {},
),
body: Column(
children: <Widget>[
Container(
color: new Color(0xfff4f5f6),
height: 38.0,
child: TabBar(
isScrollable: true,
//是否可以滚动
controller: mController,
labelColor: Colors.red,
unselectedLabelColor: Color(0xff666666),
labelStyle: TextStyle(fontSize: 16.0),
tabs: tabList.map((item) {
return Tab(
text: item.title,
);
}).toList(),
),
),
Expanded(
child: TabBarView(
controller: mController,
children: tabList.map((item) {
return Stack(children: <Widget>[
Align(alignment:Alignment.topCenter,child: Text(item.title),),
],);
}).toList(),
),
)
],
),
);
}
}