DecoratedBox(
decoration: BoxDecoration(
//This is for background color
color: Colors.white.withOpacity(0.0),
//This is for bottom border that is needed
border: Border(
bottom: BorderSide(color: AppColors.color4, width: 2.sp)),
),
child: TabBar(
...
),
),
9条答案
按热度按时间rqenqsqc1#
你可以像abdulrahmanAbdullah说的那样设置AppBar
shape
属性。但是如果你确实需要在指示器上方的边框,你可以把它放在每个标签栏项目的内部。这里有一个关于它的看法:wfypjpf42#
尝试设置appBar边框:
c2e8gylq3#
只需将TabBar Package 成DecoratedBox即可,如下所示:
希望你能得到帮助。
pvcm50d14#
我设法做到这一点,使用'flexibleSpace'属性,而不是'底部'属性,因为flexibleSpace可以有任何部件,而不仅仅是'PreferredSizeWidget'像底部。
所以我给了flexibleSpace一个Column,然后我能够将TabBar和容器放在该列中,然后使用Matrix4.translationValues(0.0,-2.6,0.0),我给容器,其中包含边框,一个nigative-padding(或类似的),所以它移动到indicatorColor的顶部。
奇迹发生了
rqenqsqc5#
另一种方法是使用堆栈并将行放在制表符下面
wydwbb8l6#
下面是我的spenster's solution版本;
我创建了一个新的小部件“BorderedTab”,而不是一个函数,它实现了Tab:
然后我使用BorderedTab就像常规的Tab一样,但是:
labelPadding: EdgeInsets.all(0.0), // Important to remove default padding
最终AppBar:
hfsqlsce7#
使用DecoratedBox和PreferredSize
首先将TabBar放入PreferredSize中:
然后用DecoratedBox Package TabBar
prdp8dxp8#
不使用其他元素的最简单方法是使用BoxShadow和TabBar,如下所示:
或者使用UnderlineTabIndicator作为TabBar的指示符参数:
djmepvbi9#
我想添加一个answer
所有的答案都有一个问题,由于这个问题,底线或者高于或者低于指示器,并且也很难控制它的高度。
好吧,这是Flutter3中的一个工作版本