📃 导航器

TabBar和TabBarView到底是什么关系呢，简而言之，TabBar就是导航栏，TabBarView就是导航栏当前所对应的内容区。

一、TabBar

TabBar 的定义如下：

const TabBar({
  Key key,
  @required this.tabs, // 子标签
  this.controller, // 控制器
  this.isScrollable = false, // 能否滑动, false：tab宽度则等比，true：tab宽度则包裹item
  this.indicatorColor, // 指示器颜色
  this.indicatorWeight = 2.0,
  this.indicatorPadding = EdgeInsets.zero,
  this.indicator,
  this.indicatorSize, // TabBarIndicatorSize.label：indicator与文字同宽，TabBarIndicatorSize.tab：与tab同宽
  this.labelColor, // 选中标签颜色
  this.labelStyle, // 选中标签样式
  this.labelPadding,
  this.unselectedLabelColor, // 未选中标签颜色
  this.unselectedLabelStyle,
  this.dragStartBehavior = DragStartBehavior.down,
  this.onTap,//点击事件
})

二、TabBarView

TabBarView 只是一个容器, 其定义如下：

const TabBarView({
  Key key,
  @required this.children, // 子widget
  this.controller, // 控制器
  this.physics,
  this.dragStartBehavior = DragStartBehavior.down,
})

三、联动使用

系统提供了一个 DefaultTabController，只需要把TabBar和TabBarView包裹起来就能实现联动

const DefaultTabController({
  Key key,
  @required this.length,
  this.initialIndex = 0,
  @required this.child,
})

实例：

class HomePage extends StatefulWidget {
  @override
  createState() => new _HomePageState();
}
class _HomePageState extends State<HomePage> {
  TabController tabController;
  final List<Tab> myTabs = <Tab>[
    new Tab(text: '语文'),
    new Tab(text: '数学'),
    new Tab(text: '英语'),
    new Tab(text: '化学'),
    new Tab(text: '物理'),
    new Tab(text: '政治'),
    new Tab(text: '经济'),
    new Tab(text: '体育'),
  ];
  @override
  void initState() {
    super.initState();
    this.tabController = TabController(length: myTabs.length, vsync: this); // 定义一个 TabController
  }
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: myTabs.length,
      child: new Scaffold(
        appBar: new AppBar(
          title: Text('首页'),
          bottom: new TabBar(
            controller: tabController, // 绑定 TabController
            tabs: myTabs,
            isScrollable: true,
          ),
        ),
        body: new TabBarView(
          controller: tabController, // 绑定 TabController
          children: myTabs.map((Tab tab) { // 数量应与tabs的数量相同
            return new Center(child: new Text(tab.text));
          }).toList(),
        ),
      ),
    );
  }
}

如果要获取当前tab的index, 可以使用 tabController.index 获取, 下标从 0 开始

监听tab的变化

通过 tabController.addListener 为tab切换添加监听

TabController tabController;
int currentTabIndex = 0;
@override
void initState() {
  super.initState();
  this.tabController = TabController(length: 2, vsync: this);
  tabController.addListener(() => _onTabChanged());
}
_onTabChanged () {
  setState(() {
    currentTabIndex = tabController.index;
  });
}

参考资料

• Flutter Widgets: TabBar
• Flutter TabBar、TabBarView的使用