Working_with_Tabs.md

使用Tabs

使用选项卡是应用程序中遵循Material Design设计准则的常见模式。Flutter包括一种方便的方法来创建tab布局作为Material库的一部分。

指南

1、 创建一个TabController

2、 创建Tabs

3、 为每个tab创建内容

1、 创建一个TabController

为了使选项卡工作，我们需要保持选定的选项卡和内容部分保持同步。这是TabController的职责。

我们可以手动创建TabController或使用DefaultTabController。使用DefaultTabController是最简单的选择。它将为我们创建一个TabController，并将其提供给所有的后代小部件。

new DefaultTabController(
  length: 3, // 需要显示的选项卡数量
  child: // 看下一步
);

2、 创建Tabs

现在我们有了一个TabController，我们可以使用TabBar创建我们的选项卡了。在本例中，我们将创建一个带有3个Tab小部件的TabBar，并将其放置在AppBar中。

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

默认情况下，TabBar查找最近的DefaultTabController的Widget树。如果要手动创建TabController，则需要将其传递给TabBar。

3、 为每个tab创建内容

现在我们有了选项卡，我们希望在选择选项卡时显示内容。为了这个目的，我们将使用TabBarView部件。

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

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

完整示例

import 'package:flutter/material.dart';

void main() => runApp(new TabBarDemo());

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