flutter的tabBar实现方法

下面我们通过Scaffold的“bottom”属性来添加一个导航栏底部Tab按钮组

Material组件库中提供了一个TabBar组件，它可以快速生成Tab菜单，下面是上图对应的源码：

import 'package:flutter/material.dart';

class TabBarDemo extends StatefulWidget {
  @override
  _SessionDemoState createState() => _SessionDemoState();
}

class _SessionDemoState extends State<TabBarDemo> {
  TabController _controller;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    //tabBar的个数
    _controller=TabController(length: 3,vsync: this);
  }
  @override
  void dispose() {
    // TODO: implement dispose
    _controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
      title: Text('TabBar案例'),
      bottom: TabBar(
        controller: _controller,
        tabs: <Widget>[
          Tab(icon: Icon(Icons.email)),
          Tab(icon: Icon(Icons.accessibility)),
          Tab(icon: Icon(Icons.beach_access)),

        ],
      ),
    ),
      body: TabBarView(
        controller: _controller,
        children: <Widget>[
          Text('11111'),
          Text('22222'),
          Text('33333'),
        ],
      ),
    );
  }
}

接下来通过TabBar生成了一个底部菜单栏，TabBar的tabs属性接受一个Widget数组，表示每一个Tab子菜单，我们可以自定义，也可以像示例中一样直接使用Tab 组件，它是Material组件库提供的Material风格的Tab菜单。

Tab组件有三个可选参数，除了可以指定文字外，还可以指定Tab菜单图标，或者直接自定义组件样式。Tab组件定义如下：

Tab({
  Key key,
  this.text, // 菜单文本
  this.icon, // 菜单图标
  this.child, // 自定义组件样式
 })

创建TabController

TabBar参数

TabBar({
  Key key,
  @required this.tabs,//显示的标签内容，一般使用 Tab 对象,也可以是其他 的 Widget
  this.controller,//TabController 对象
  this.isScrollable = false,//是否可滚动
  this.indicatorColor,//指示器颜色
  this.indicatorWeight = 2.0,//指示器高度
  this.indicatorPadding = EdgeInsets.zero,//底部指示器的 Padding
  this.indicator,//指示器 decoration，例如边框等
  this.indicatorSize,//指示器大小计算方式，TabBarIndicatorSize.label 跟文 字等宽,TabBarIndicatorSize.tab 跟每个 tab 等宽
  this.labelColor,//选中 label 颜色
  this.labelStyle,//选中 label 的 Style
  this.labelPadding,//每个 label 的 padding 值
  this.unselectedLabelColor,//未选中 label 颜色
  this.unselectedLabelStyle,//未选中 label 的 Style
  this.dragStartBehavior = DragStartBehavior.start,
  this.onTap,
})