flutter 多种情况tabbar高度问题，普通使用和嵌套使用高度问题（Tab）。

众所周知tabbar的高度是不可改变的。比如我们普通的写一个tabbar。

先上效果图：

代码：

Scaffold(
          appBar: AppBar(
              title: Text("TabBarDemo"),
              bottom: TabBar(
                tabs: <Widget>[
                  Tab(text: "热门"),
                  Tab(text: "推荐"),
                  Tab(text: "关注"),
                  Tab(text: "收藏"),
                  Tab(text: "新增"),
                  Tab(text: "点赞"),
                ],
              ),
          ),
          body: TabBarView(
            children: <Widget>[
              Center(
                child: Text("这是热门的内容")
              ),
              Center(
                  child: Text("这是推荐的内容")
              ),
              Center(
                  child: Text("这是关注的内容")
              ),
              Center(
                  child: Text("这是收藏的内容")
              ),
              Center(
                  child: Text("这是新增的内容")
              ),
              Center(
                  child: Text("这是点赞的内容")
              )
            ],
          ),
        ),

可以看到如果没有任何需求，那么这样写完全可以。

Tabbar高度

如果我们的需求只是在上面的基础上，让高度小一点，那么可以使用以下方法。

PreferredSize(
                        preferredSize: Size(double.infinity, 30),//设置高度为30
                        child: Container(
                          child: TabBar(
                            controller: this._tabController,
                            indicatorSize: TabBarIndicatorSize.label,
                            tabs: <Widget>[
                              Tab(
                                child: Text('测试'),
                              ),
                              Tab(
                                child: Text('测试'),
                              ),
                              Tab(
                                child: Text('测试'),
                              ),
                            ],
                          ),
 ))

因为tabbar的高度是系统内定的，所以不能直接修改，只能在外面嵌套一个PreferredSize来设置固定高度，

preferredSize: Size(double.infinity, 30),//设置高度为30

普通使用，这样的方法完全可以。

tabbar顶部悬停（高度自定义）

这个场景是很多开发人员都会用到的。

悬停场景的代码如下：

SafeArea(
      top: true,
      child: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool
                                             innerBoxIsScrolled) {
          return <Widget>[

             SliverAppBar(
                 pinned: true,
                 floating: true,
                 title: Text('标题'),
                 bottom: PreferredSize(
                   preferredSize: Size(double.infinity,30),
                child:TabBar(
                     labelColor: Colors.black,
                    controller: this._tabController,
                     tabs: <Widget>[
                       Tab(text: '资讯'),
                       Tab(text: '技术'),
                      Tab(text: '技术'),
                     ],
                  ),
                 )
             ),
            SliverGrid(
              gridDelegate:
                  SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3, crossAxisSpacing: 5,
                      mainAxisSpacing: 3),
              delegate:
                  SliverChildBuilderDelegate((BuildContext context, int
                        index) {
                return Container(
                  color: Colors.primaries[index %
                            Colors.primaries.length],
                );
              }, childCount: 20),
            )
          ];
        },
        body: TabBarView(
          controller: _tabController, //tabbar控制器
          children: <Widget>[
            // Scaffold(
            //   body: Text('sdf'),
            // ),
            Text('sdf'),
            Text('sdf'),
            Text('sdf'),
          ],
        ),
      ),
    );    

悬停tabbar主要用到的是SliverAppBar部分，也就是bottom中写的tabbar代码，这样的功能是向上滑动时，title标题隐藏，tabbar悬停在顶部。

可以看到我们用之前的方法PreferredSize设置tabbar的高度为30。接下来看看效果。

可以看到，出现了溢出。为什么呢？使用PreferredSize确实可以修改tabbar的高度。但是在SliverAppBar中bottom的高度是固定的，也就是我们只修改了内部tabbar的高度，实际的滑动高度是以bottom的高度滑动的。所以这个方法在这里就不好用了！！

经过我的努力攻克SliverAppBar以及bottom的高度修改。。。失败告终！！！哭。

but，，但是。。功夫不负有心人。找到了另一种方法。也是比较简单的，可以说非常合适，思路也是简单明了。

解决办法：

将SliverAppBar替换掉。NestedScrollView中还有一个组件是SliverPersistentHeader。

SliverPersistentHeader控件当滚动到边缘时根据滚动的距离缩小高度，有点类似 SliverAppBar 的背景效果。

SliverPersistentHeader介绍

大家可以看这个，这里就不多说了。

直接先上代码然后研究：

SafeArea(
      top: true,
      child: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
　　　　　　　　//写类似于SliverAppBar中的title部分。可以自定义图标，标题，内容
            SliverPersistentHeader(
                delegate: CommonSliverHeaderDelegate(
                    islucency: true,
                    child: PreferredSize(
                        preferredSize: Size.fromHeight(60),
                        child: Row(
                          children: [
                            Container(
                              padding: EdgeInsets.all(20),
                              alignment: Alignment.center,
                              child: Text('sdfsdf'),
                            ),
                            Container(
                              padding: EdgeInsets.all(20),
                              alignment: Alignment.center,
                              child: Text('sdfsdf'),
                            ),
                            Container(
                              padding: EdgeInsets.all(20),
                              alignment: Alignment.center,
                              child: Icon(Icons.add),
                            ),
                          ],
                        )))),
　　　　　　　//tabbar悬停
            SliverPersistentHeader(
                floating: true,
                pinned: true,
                delegate: CommonSliverHeaderDelegate(
                    islucency: false,
                    child: PreferredSize(
                        preferredSize: Size(double.infinity, 30),
                        child: Container(
                          child: TabBar(
                            controller: this._tabController,
                            indicatorSize: TabBarIndicatorSize.label,
                            tabs: <Widget>[
                              Tab(
                                child: Text('测试'),
                              ),
                              Tab(
                                child: Text('测试'),
                              ),
                              Tab(
                                child: Text('测试'),
                              ),
                            ],
                          ),
                        )))),

            SliverGrid(
              gridDelegate:
                 SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3, crossAxisSpacing: 5,
                  mainAxisSpacing: 3),
              delegate:
                  SliverChildBuilderDelegate((BuildContext context, int
                      index) {
                return Container(
                  color: Colors.primaries[index %
                      Colors.primaries.length],
                );
              }, childCount: 20),
            )
          ];
        },
        body: TabBarView(
          controller: _tabController, //tabbar控制器
          children: <Widget>[
            // Scaffold(
            //   body: Text('sdf'),
            // ),
            Text('sdf'),
            Text('sdf'),
            Text('sdf'),
          ],
        ),
      ),
    );                                                                

可以看到代码中的第一个SliverPersistentHeader写的是类似于SliverAppBar中的title组件。

第二个SliverPersistentHeader就是我们实现的tabbar。这个tabbar的高度可以自定义。

SliverPersistentHeader中的floating: true,pinned: true,表示是否可以滑动悬停，因为我们要tabbar悬停在顶部，所以需要写这个，如果不需要悬停的组件，直接不设置就好，效果就是会滑动隐藏掉。

因为我们自定义了CommonSliverHeaderDelegate这个组件，所以设置PreferredSize的高度是有效的。

自定义可以看我另一个文章：flutter SliverPersistentHeader子组件透明度渐变【滑动悬停appbar添加自定义组件的透明度】

这个文章也实现了顶部隐藏淡入淡出的效果。

效果图：

好了到此为止，此功能就算完成了，另外附加一个自定义的tab。

EachTab

https://github.com/LiuC520/flutter_custom_bottom_tab_bar

tab实现了自定义高度，内边距，以及角标等功能。很不错的组件。