Question

我正在尝试在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),
              ),
            ),
          )
        ),
      )
    )

Answer 1

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

轻按Flutter的TabBar时删除高光

1 个答案: