Flutter-TabBar

Tab 标签栏的基本组成是顶部的 Tab标题和内容区域，在 Flutter 中，Material 提供了 TabBar 和 TabBarView 两个 Widget
TabBar必须是放在AppBar的bottom下

TabBar和Tab

TabBar和Tab都是设置标签栏的内容

bottom: TabBar(
  tabs: <Widget>[
    Tab(icon: Icon(Icons.local_florist),),
    Tab(icon: Icon(Icons.change_history),),
    Tab(icon: Icon(Icons.directions_bike),),
  ],
),

TabBar

TabBar主要属性简介

bottom: TabBar(
  unselectedLabelColor: Colors.black38, // 标签栏中未选择的图标颜色
  indicatorColor: Colors.black54, // 标签栏中选中的线（指示器）的颜色
  indicatorSize: TabBarIndicatorSize.label, // 线的长度
  indicatorWeight: 1.0, // 线的宽度
  tabs: <Widget>[
    Tab(icon: Icon(Icons.local_florist),),
    Tab(icon: Icon(Icons.change_history),),
    Tab(icon: Icon(Icons.directions_bike),),
  ],
),

属性改变后

TabBarView

TabBarView则是设置每一个标签栏选项的页面

TabBarView(
  children: <Widget>[
    Icon(Icons.local_florist, size: 128, color: Colors.black12,),
    Icon(Icons.change_history, size: 128, color: Colors.black12,),
    Icon(Icons.directions_bike, size: 128, color: Colors.black12,)
  ],
),

TabBarView