Flutter 设置Tabbar底部滑块的大小及位置

2021-06-08  本文已影响0人  黑炭长

我们先看一下设计图给出的效果


设计图效果

设置滑块高度和宽度官方给的属性是

indicatorSize: TabBarIndicatorSize.label,// tab || label
indicatorWeight: sw(8),

这两个属性只能设置滑块的高度和 长度是跟随文字还是tab的宽度

如何设置圆角和固定宽度的滑块呢

1、广大网友给的的方法多数是改源码,例如
这一篇

2、其实官方的属性已经给我们提供了方法

indicator: BoxDecoration(
          borderRadius: BorderRadius.circular(2),
          color: Color.fromRGBO(255, 221, 107, 1)),
indicatorPadding: EdgeInsets.only(left: 30, right: 40, top: 45),

设置之后的效果


亲测效果

此两个属性配合使用即可达到圆角和固定大小的效果,最好是每个tab的名称字数相同

扩展===隐藏滑块只需设置

indicator: BoxDecoration(),
上一篇 下一篇

猜你喜欢

热点阅读