如需转载，请注明出处：Flutter学习笔记（17）--顶部导航TabBar、TabBarView、DefaultTabController
上一篇我们说了BottmNavigationBar底部导航组件，今天来学习一下顶部导航组件TabBar，TabBar选项卡一般位于AppBar下方，通常和TabBar（顶部导航选项卡）一起使用的有TabBarView和TabController。
TabBar：Tab页的选项组件，默认为水平排列。
TabBarView：Tab页的内容容器，Tab页内容一般处理为随选项卡的改变而改变。
TabController：TabBar和TabBarView的控制器，它是关联这两个组件的桥梁。
TabBar组件常见属性 属性名 类型 说明isScrollable bool 是否可以水平移动
tabs List<Widget> Tab选项列表
Tab组件常见属性 属性名 类型 说明
icon Widget Tab图标
text String Tab文本
TabBarView组件常见属性 属性名 类型 说明
controller TabController 指定视图的控制器
children List<Widget> 视图组件的child为一个列表，一个选项卡对应一个视图
上面我们说的TabController，与其并列的还有DefaultTabController，两者的区别是TabController一般放在有状态组件中使用，而DefaultTabController一般放在无状态组件中使用。
下面通过DefalutTabController来关联TabBar和TabBarView来实现一个Demo：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
final List<Tab> _myTabs = <Tab>[
Tab(text: '选项一',icon: Icon(Icons.add_shopping_cart),),
Tab(text: '选项二',icon: Icon(Icons.wifi_tethering),),
Tab(text: '选项三',icon: Icon(Icons.airline_seat_flat_angled),)
];
@override
Widget build(BuildContext context) {
return new MaterialApp(
debugShowCheckedModeBanner: false,
title: 'TabBar Demo',
home: new Scaffold(
body: DefaultTabController(
length: _myTabs.length,
initialIndex: 1,
child: Scaffold(
appBar: new AppBar(
title: new Text('TabBar Demo'),
leading: Icon(Icons.menu),
actions: <Widget>[
Icon(Icons.search)
],
bottom: new TabBar(
tabs: _myTabs,
indicatorColor: Colors.black,
indicatorWeight: 5,
indicatorSize: TabBarIndicatorSize.label,
labelColor: Colors.limeAccent,
unselectedLabelColor: Colors.deepOrange,
),
),
body: new TabBarView(
children: _myTabs.map((Tab tab){
return Center(
child: new Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(Icons.tab),
Text(tab.text)
],
),
);
}).toList(),
),
)
),
),
);
}
}