使用 tabs

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

Working with tabs is a common pattern in apps that follow the Material Design guidelines. Flutter includes a convenient way to create tab layouts as part of the material library.

这份教程将帮助你创建一个 tabs 布局样例，请参见如下步骤：

This recipe creates a tabbed example using the following steps;

步骤

Directions

1. 创建 TabController

   Create a TabController.

2. 创建 tabs

   Create the tabs.

3. 为每个 tab 创建内容

   Create content for each tab.

1. 创建 TabController

1. Create a TabController

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

For tabs to work, you need to keep the selected tab and content sections in sync. This is the job of the TabController.

我们既可以手动创建一个 TabController ，也能够直接使用 DefaultTabController widget。

Either create a TabController manually, or automatically by using a DefaultTabController widget.

最简单的选择是使用 DefaultTabController widget，因为它能够创建出一个可供所有子 widgets 使用的 TabController。

Using DefaultTabController is the simplest option, since it creates a TabController and makes it available to all descendant widgets.

return MaterialApp(
  home: DefaultTabController(
    length: 3,
    child: Scaffold(),
  ),
);

2. 创建 tabs

2. Create the tabs

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

When a tab is selected, it needs to display content. You can create tabs using the TabBar widget. In this example, create a TabBar with three Tab widgets and place it within an AppBar.

return MaterialApp(
  home: DefaultTabController(
    length: 3,
    child: Scaffold(
      appBar: AppBar(
        bottom: const 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。

By default, the TabBar looks up the widget tree for the nearest DefaultTabController. If you’re manually creating a TabController, pass it to the TabBar.

3. 为每个 tab 创建内容

3. Create content for each tab

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

Now that you have tabs, display content when a tab is selected. For this purpose, use the TabBarView widget.

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

交互式样例

Interactive example

import 'package:flutter/material.dart';

void main() {
  runApp(const TabBarDemo());
}

class TabBarDemo extends StatelessWidget {
  const TabBarDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: const TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
            title: const Text('Tabs Demo'),
          ),
          body: const TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}