使用 Tabs

在 Material Design 设计准则里，Tabs 是一种常用的布局模型。Flutter 自带的 material 库 可以帮助开发者们非常便捷的创建 Tab 布局。

步骤

• 创建 TabController

• 创建 tabs

• 为每个 tab 创建内容

1. 创建 TabController

为了使所选的 tab 与它所对应的内容能够同步变化，需要用 TabController进行控制。

我们既可以手动创建一个 TabController 也能够直接使用 DefaultTabController Widget。最简单的选择是使用 DefaultTabController Widget，因为它能够创建出一个可供所有子 Widgets 使用的 TabController。

DefaultTabController(
  // The number of tabs / content sections we need to display
  length: 3,
  child: // See the next step!
);

2. 创建 tabs

现在我们已经成功创建了 TabController，接下来就可以用 TabBar Widget 来创建 tabs 。下面这个示例创建了包含三组 Tab Widget 的 TabBar（一个），并把它放置于 AppBar Widget 中。

DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      bottom: TabBar(
        tabs: [
          Tab(icon: Icon(Icons.directions_car)),
          Tab(icon: Icon(Icons.directions_transit)),
          Tab(icon: Icon(Icons.directions_bike)),
        ],
      ),
    ),
  ),
);

TabBar 默认将会在 Widget 树中向上寻找离它最近的一个 DefaultTabController 节点作为自己的 TabController。如果您想手动创建 TabController，那么您必须将它作为参数传给 TabBar。

3. 为每个 tab 创建内容

现在我们已经成功创建了一些 tabs ，接下来要实现的是 tab 被选中时显示其对应的内容。为了实现这个效果，我们将使用 TabBarView Widget。

注意： TabBarView 中内容的顺序很重要，它必须与 TabBar 中tab的顺序相对应!

TabBarView(
  children: [
    Icon(Icons.directions_car),
    Icon(Icons.directions_transit),
    Icon(Icons.directions_bike),
  ],
);

一个完整的例子

import 'package:flutter/material.dart';
void main() {
  runApp(TabBarDemo());
}
class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
            title: Text('Tabs Demo'),
          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}