众所周知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实现了自定义高度,内边距,以及角标等功能。很不错的组件。

flutter 多种情况tabbar高度问题,普通使用和嵌套使用高度问题(Tab)。的更多相关文章

  1. 设置UILabel可变高度(根据文本内容自动适应高度)

    @property(nonatomic)UILabel *showLabel;   // 计算文本所占高度,计算出来之后设置label的高度 // 第一个参数:字体大小,字体大小/样式影响计算字体的高 ...

  2. jQuery中获取文档的高度、可视区域高度以及滚动条距页面顶部的高度

    在写页面的时候,经常会碰到这样的情况,就是要获取文档的高度.可视区域高度或者滚动条距页面顶部的高度等情况. 但我总是有些爱搞混淆了,这里还是简单做个笔记吧,这里只限于使用jQuery来获取. 1.获取 ...

  3. 父元素高度设置为min-height,子元素高度设置为100%,但实际上子元素高度你知道是多少吗?

    前言 给父元素一个min-height,子元素设置height:100%. 代码 <!DOCTYPE html> <html> <head> <title&g ...

  4. 关于div容器在ie6下默认高度不为0(存在默认高度)

    最近做项目的时候遇到一个问题,相信很多人都遇到过,就是在测试兼容性的时候,在ie6下小于12px 的背景的高度不等于原高,或许这样说你可能不是很明白,那就举个例子吧! 如图所示: 锯齿状的背景图本来是 ...

  5. flex布局嵌套之高度自适应

    查遍各大资源无任何flex嵌套布局的例子,经过自己折腾完成了项目中的高度自适应需求(更多应用于前端组件) 效果图: html代码:(关键地方已经用颜色特别标识 ^_^) <!DOCTYPE ht ...

  6. C#如何测量字符串的高度宽度和精确取得字符串的高度宽度

    C#如何测量字符串的高度宽度和精确取得字符串的高度宽度 因为MFC中CDC有GetTextExtent()可以获得字符串的高度宽度 像素单位,所以自然想到c#的GDI+的MeasureString,这 ...

  7. js获取窗口滚动条高度、窗口可视范围高度、文档实际内容高度、滚动条离浏览器底部的高度

    1.获取窗口可视范围的高度 //获取窗口可视范围的高度 function getClientHeight(){ var clientHeight=0; if(document.body.clientH ...

  8. div嵌套img高度不相同

    div中嵌套img,如果div里嵌套一个img元素且div的高度是由img的高度来撑开,那么div的高度总会比img的高度多3px. 可以明显看到div实际高度高出img高度3px.为了解决此问题,我 ...

  9. LoadRunner断言:正确结果有多种情况

    用过lr的都知道,我们可以用web_reg_find这个注册函数判断某个请求的返回中是否有我们要找的内容. 但是,如果正常的情况有多种,该如何断言呢? 设置多个检查点 把每个检查点获取到的结果数量相加 ...

  10. 设置cell高度的两种方法(label高度的可变引起cell高度可变的情况)

    第一种:(iOS8以后可用) 在Xib或stroyboard中(代码也可以) 利用AutoLayout设置好label的约束(比如可以设置四个边都距离屏幕50等方式,必须四个边都要固定好). 在代码部 ...

随机推荐

  1. bbs大作业

    1.项目开发基本流程 1.需求分析 2.架构设计 3.分组开发 4.提交测试 5.交付上线 2.项目流程 仿造博客园项目(核心:文章的增删改查) 1.表分析: 1.1用户表 1.2个人站点表 1.3文 ...

  2. Idea的jdbc中的查询与增删该

    在上一篇的折磨中 终于写好了代码 来总结一下其中的奥妙 (相同部分:)1.有mysql并且与主机建立连接 2.有jar包并且复制到自己创建的libs文件下,右键add 3.需要写main方法 4.需要 ...

  3. 使用java.util.Timer实现定时任务,详解Thread.sleep() in a loop, probably busy-waiting问题

    很多时候,我们需要定时任务实现一些诸如刷新,心跳,保活等功能.这些定时任务往往逻辑很简单,使用定时任务的框架(例如springboot @Scheduled)往往大材小用. 下面是一个定时任务的典型写 ...

  4. aop中的名词解释

    aop中的名词解释 aop spring Joinpoint(连接点) 目标对象中所有可以增强的方法叫做连接点 Pointcut(切入点) 目标对象中要增强的的方法 Advice(通知/增强) 增强的 ...

  5. Commons-Collections反序列化

    Java反序列化漏洞 Commons Collections Apache Commons 是 Apache 软件基金会的项目.Commons Collections 包为 Java 标准的 Coll ...

  6. 关于HTML5中Video标签播放问题

    PS:官网首页视频IOS与安卓都可播放代码: <video width="100%" height="auto" type="video/mp4 ...

  7. 【C++复习】运算符重载中的特殊运算符

    无法被重载 类属关系运算符 . 成员指针运算符 .* 作用域分辨符 :: 三目运算符 ?: 只能通过成员函数重载 赋值运算符= 方括号[] 圆括号() 指向结构体成员运算符->

  8. 【C++复习】第六章 数组、指针、字符串

    1.数组 1.1 基本数组 数组声明int a[10]; 声明时方括号内是元素个数.下标从0开始. 第一个元素是a[0],最后一个元素是a[9] a[n]表示的是第n+1个元素 二维数组int b[3 ...

  9. Date时间API

    JDK8之前时间API   1. java.lang.System类     System类提供的public static long currentTimeMillis()用来返回当前时间与1970 ...

  10. LinuxGPU服务器搭建

    (1)驱动与cuda下载: https://www.nvidia.cn/Download/Find.aspx?lang=cn (2)执行以下命令进行安装,文件名替换为自己的. sudo sh NVID ...