我正在尝试在Flutter中实现自己的TabBar设计。我获得了不错的成绩。但是,当我点击另一个选项卡以更改选项卡时,默认情况下会创建一个高亮显示,如here图像所示。我想知道是否有什么方法可以消除点击时出现的方形高光。我几乎没有一天到处找,也没有找到任何解决方案。

如果有人有任何解决方案,请告诉我。谢谢。

编辑:根据CopsOnRoad的建议,我将TabBar包裹在Container中,并将颜色设置为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),
              ),
            ),
          )
        ),
      )
    )

最佳答案

那就是涟漪效应。您可以通过将其包装在Container中并为其赋予透明颜色来删除它。

10-05 20:59
查看更多