当 Flutter 的 TabBar 被点击时移除高亮

Question

我正在尝试在颤振中实现我自己的 TabBar 设计。我能够得到一个很好的结果。然而，当我点击其它选项卡更改选项卡，还有一个亮点默认创建，如下图所示在这里。我想知道是否有任何方法可以摆脱点击时的方形高光。我一直在四处寻找几乎一天没有找到任何解决方案。

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

编辑：作为 CopsOnRoad 的建议，我将 TabBar 包裹在容器中并将颜色设置为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

你应该splashFactory: NoSplash.splashFactory像这篇文章提到的那样设置标签栏。

TabBar(splashFactory: NoSplash.splashFactory,)

如何禁用 Flutter 中默认的 Widget 启动效果？

Answer 2

我有类似的问题。我尝试阅读文档并找到了它。

  ///
  /// If non-null, it is resolved against one of [MaterialState.focused],
  /// [MaterialState.hovered], and [MaterialState.pressed].
  ///
  /// [MaterialState.pressed] triggers a ripple (an ink splash), per
  /// the current Material Design spec.
  ///
  /// If the overlay color is null or resolves to null, then the default values
  /// for [InkResponse.focusColor], [InkResponse.hoverColor], [InkResponse.splashColor],
  /// and [InkResponse.highlightColor] will be used instead.
  final MaterialStateProperty<Color?>? overlayColor;

最后只需添加overlayColor透明即可。它解决了我的问题。

overlayColor: MaterialStateProperty.all(Colors.transparent)

Answer 3

这就是连锁反应。您可以通过将其包裹起来Container并赋予透明颜色来将其移除。