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 的背景效果。
大家可以看这个，这里就不多说了。
直接先上代码然后研究：
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实现了自定义高度，内边距，以及角标等功能。很不错的组件。
最新文章
- GitHub使用指南
- 机器学习：异常检测算法Seasonal Hybrid ESD及R语言实现
- opengl视图变换 投影变换推导
- tornado 协程的实现原理个人理解；
- AngularJS 实现的输入自动完成补充功能
- ADO.NET基础（增删改查）
- 使用BeanUtils操作Bean属性
- java中的IO流之文件复制
- [转] Web前端优化之 内容篇
- [转载]IOS项目打包除去NSLog和NSAssert处理之阿堂教程
- Cocos2dx 3.1.1 学习笔记整理(3)：逐帧动画
- C#利用VUDP.cs开发网络通讯应用例程
- day_5字符串和列表的各种操作方法
- 洛谷 P1126 机器人搬重物
- zabbix3.x添加H3C网络设备详解
- 写给Android开发者的混淆使用手册
- Scikit-learn 库的使用
- sphinx配置 + php
- BIOS/MBR UEFI/GPT关系与区别-资料整理
- 1.4 Go语言-switch语句(转)