好几天没来了，最近在练习从网络获取api接口数据做一个新闻阅读器，这个过几天完成后再发出来。

今天要说的是大家在使用app的时候经常看到的顶部标签页，当你左右滑动页面的时候，整个内容和标签是联动的。
使用TabBar一共需要用到下面三个主要内容：

1. TabBar //这个是标签栏的内容，包括一个图标和一个文本内容
2. TabBarView //这是对应某个标签栏下的内容显示
3. DefaultTabController //要做到标签和内容的对应联动，就是靠这个控制器，flutter提供了一个默认的控制器来进行联动控制

少说废话，先看东西：

图像.gif

下面先撸码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class NewsPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new NewsPageState();
}

class NewsPageState extends State<NewsPage> {
  //定义一个widget数组，用于存放标签栏的内容,这里我定义了8个标签栏，分别对应不同的新闻类型
  final List<Tab> tabs = <Tab>[
    new Tab(
      text: '头条',
    ),
    new Tab(
      text: '社会',
    ),
    new Tab(
      text: '国内',
    ),
    new Tab(
      text: '娱乐',
    ),
    new Tab(
      text: '体育',
    ),
    new Tab(
      text: '军事',
    ),
    new Tab(
      text: '科技',
    ),
    new Tab(
      text: '财经',
    ),
  ];
  @override
  Widget build(BuildContext context) {
    //返回一个默认的tab控制器，用于tabBar和tabBarView的联动控制
    return new DefaultTabController(
      //length表示一个有几个标签栏
      length: tabs.length,
      //返回一个包含了appBar和body内容区域的脚手架
      child: new Scaffold(
        appBar: new AppBar(
          title: new Text('TabBar'),
          //标签栏位置存于appBar的底部，tabs是一个widget数组，就是每个标签栏的内容
          bottom: new TabBar(
            tabs: tabs,
            //这表示当标签栏内容超过屏幕宽度时是否滚动，因为我们有8个标签栏所以这里设置是
            isScrollable: true,
            //标签颜色
            labelColor: Colors.orange,
            //未被选中的标签的颜色
            unselectedLabelColor: Colors.white,
            labelStyle: new TextStyle(fontSize: 18.0),
          ),
        ),
        //根据tab内容，我在每个标签对应的视图里放了一个简单的文本，内容就是对应的标签名称。
        body: new TabBarView(
          children: tabs.map((Tab tab) {
            return new Center(
              child: new Text(
                tab.text,
                style: new TextStyle(fontSize: 30.0),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';
import 'news_page.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Simple News',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new NewsPage(),
    );
  }
}

整个代码不复杂，我基本在上面代码块中添加了注释，我相信大家看了注释基本能明白含义，我这里就不多做介绍了，其中TabBar构造函数包含属性多一些，基本都是对标签栏的功能设置，大家可以自己动手设置下看看。