我尝试在flutter中实现我自己的TabBar设计。我能够得到一个相当不错的结果。然而,当我点击另一个标签来更改标签时,默认情况下会创建一个高亮显示,如here图像所示。我想知道是否有任何方法可以摆脱点击时的方形高亮显示。我已经四处寻找了差不多一天,没有找到任何解决方案。
如果任何人有任何解决办法,请让我知道。谢谢。
编辑:按照CopsOnRoad的建议,我将TabBar Package 在容器中,并将颜色设置为Colors.transparent
,但它并没有真正消失,所以我暂时尝试将颜色设置为Theme.of(context).canvasColor
。
Container(
color: Theme.of(context).canvasColor,
child: TabBar(
isScrollable: true,
indicator: ShapeDecoration(
color: Color(0xFFE6E6E6),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(99.0)
)
),
tabs: List<Widget>.generate(
categories.length,
(index) => Tab(
child: Text(
categories[index],
style: TextStyle(
fontFamily: 'Hiragino Sans',
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Color(0xFF4D4D4D),
),
),
)
),
)
)
5条答案
按热度按时间zwghvu4y1#
你也可以用下面的代码禁用涟漪/高亮/飞溅效果。用ThemeData的数据添加Theme,其中高亮和飞溅的颜色都是透明的。
rt4zxlrg2#
这就是涟漪效应。你可以通过将其包裹在
Container
中并赋予其透明颜色来移除它。kninwzqo3#
你应该像这篇文章提到的那样设置标签栏
splashFactory: NoSplash.splashFactory
。How to disable default Widget splash effect in Flutter?
n7taea2i4#
这是我从@Tempelriter定制的解决方案
du7egjpx5#
我也遇到过类似的问题。我试着阅读文档并找到了它。
最后只是添加了
overlayColor
到透明。它解决了我的问题。