使用 flutter 实现一个Tab导航栏

现现在打开一个 App，好比头条、滴滴，都能看到一个 Tab 导航切换栏，用来切换到不一样的展现页。今天就用 Flutter 实现一下这种效果。

---

在 Flutter 里，基本上全部的东西都是组件。Flutter 已经提供了不少 Material Design 风格的组件，能够知足咱们大部分的需求，像 Tab 这种基础组件，确定是有提供的啦。具体能够看这里 Components-Tabs ，写的很详细了，里面有一些 do 和 don't ，遵循这些规则，能够提供更好的用户体验。

---

1. 首先，实现基础的骨架

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Study',
      home: Center(child: Text('Hello Tab')),
    );
  }
}
复制代码

2. TabController

当咱们切换 Tab 导航栏时，Tab 的内容要跟着发生改变，这个就是须要 TabCOntroller 来完成的。想要简单地实现，使用 DefaultTabController 就能够了。固然，你也能够不用，自定义你的 TabController ，参考 TabController class。二者的区别就在因而否 TabBar 和 TabBarView 是父组件是否有状态。

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

3. Tab 位置

通常来讲，Tabs 能够放置在顶部栏，如 app bar。这也是咱们使用 App 时常会看到的一种布局方式。得益于 Material 提供了一个 Scaffold 组件，咱们是能够很方便地实现脚手架布局，包括顶部导航栏、中间内容、底部导航等。

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)),
        ],
      ),
    ),
  ),
);
复制代码

4. 每一个 Tab 的内容

当选中一个 Tab 的时候，就要展现这个 Tab 对应的内容。也就是说这里的 TarBarView 是要和 TabBar 一一对应的。

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

复制代码

仿真器看到的效果如图所示：

可能，有一些人的需求是会不须要 app bar 中的标题部分，直接把 Tab 置于最上方的位置，这个其实也不难处理。以前咱们是把 TabBar 放在 AppBar 的 bottom 位置，如今放在 title 位置就行了嘛

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

效果如图：

完整的代码看这里 tab_bar.dart

---

最后

笔者最近在学习flutter，会持续地记录本身的学习过程，并放在 github 上。

有问题欢迎提出，你们一块儿讨论，一块儿进步。

---

参考资料

Components-Tabs

DefaultTabController class

Tabbed AppBar