综述

在Material的设计准则里面，tabs是一个常用的模块。Flutter里面包含了 material library创建tab布局的简便方法

一、指引

创建一个 TabController
创建tab页
为每个tab创建内容

1. 创建一个 `TabController`

为了使tab起作用，我们需要保持选中的tab和相关内容同步。这就是 TabController的职责。

我们可以手动创建TabController，也可以使用DefaultTabController小部件。使用DefaultTabController是最简单的选项，因为它将为我们创建一个TabController，并使它可用于所有子类Widget。

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

2. 创建tab页

现在我们已经有个一个TabController,我们可以TabBar Widget去使用创建我们的tab。在这个示例中，我们将会在一个AppBar下.创建一个包含3个Tab Widgets 的TabBar。

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，则需要将其传递到“TabBar”。

3. 为每个tab创建内容

既然我们有了选项卡，那么我们就需要在选择选项卡时显示相关的内容。因此，我们将使用TabBarView Widget.

备注：顺序很重要，必须与TabBar中的选项卡的顺序相对应！

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

4. 完整例子

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),
            ],
          ),
        ),
      ),
    );
  }
}

二、效果图

效果图

三、原文链接

1.Flutter初步探索（二）使用Tabs

四、参考文档

1.Working with Tabs

五、公众号

不器猿

Flutter初步探索（二）使用Tabs

综述