前言

最近在开发中想实现一个AppBar下面有选项卡，来回切换的页面功能，百度了很多没有和自己需求符合的，网上大都是返回的Scaffold，使用系统的Appbar，添加至.bottom中，但是现在项目中用的是自定义的Appbar,不想破坏系统的统一封装。

解决方法

所以在body 中实现TabBar 和 TabBarView，开始使用Column一直不行，只能显示一个，但是在body里面同时放置 TabBar 和 TabBarView需要注意
TabBarView 的父 Widget 必须知道宽高才能布局，否则，会报错：BoxConstraints forces an infinite height.

使用 Column + Expanded 即可：

body: Column(
          children: <Widget>[
            //设置选项卡
            Material(
              //这里设置tab的背景色
              color: AppColor.white,
              child: buildTabBar(),
            ),
            Expanded(
              flex: 1,
                child:
                //设置选项卡对应的page
                buildBodyView())
          ],
        )

注：还有设置tabbar的tab背景颜色，tabbar中的tab的背景颜色取的实际是AppBar的主题色，所以我们将tabbar放在Material中来重置了主题色，变成我们想要的背景色.

buildTabBar为创建TabBar的方法：

buildTabBar() {
    //构造 TabBar
    Widget tabBar = TabBar(
        //tabs 的长度超出屏幕宽度后，TabBar，是否可滚动
        //设置为false tab 将平分宽度，为true tab 将会自适应宽度
        isScrollable: false,
        //设置tab文字得类型
        labelStyle: TextStyle(fontSize: 15, fontWeight: FontWeight.w500),
        //设置tab选中得颜色
        labelColor: Color(0xFF035DFF),
        //设置tab未选中得颜色
        unselectedLabelColor: AppColor.textLightDark,
        //设置自定义tab的指示器，CustomUnderlineTabIndicator
        //若不需要自定义，可直接通过
        //设置指示器颜色
        indicatorColor: Color(0xFF035DFF),
        //indicatorWight 设置指示器厚度
        indicatorPadding: EdgeInsets.only(left: 10, right: 10),
        indicatorWeight: 1.5,
        ///指示器大小计算方式，TabBarIndicatorSize.label跟文字等宽,TabBarIndicatorSize.tab跟每个tab等宽
        indicatorSize: TabBarIndicatorSize.label,
        //生成Tab菜单
        controller: tabController,
        //构造Tab集合
        tabs: tabs.map((e) => Tab(text: e)).toList());

    return tabBar;
  }

buildBodyView创建视图方法：

buildBodyView() {
    //构造 TabBarView
    Widget tabBarBodyView = TabBarView(
      controller: tabController,
      //创建Tab页
      children: tabs.map((e) {
        return Container(
          alignment: Alignment.center,
          child: Text(e, textScaleFactor: 1),
        );
      }).toList(),
    );
    return tabBarBodyView;
  }