点击Flutter的TabBar时移除高亮显示

w7t8yxp5 于 2023-01-27 发布在 Flutter

关注(0)|答案(5)|浏览(282)

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

flutter

来源：https://stackoverflow.com/questions/52914982/remove-highlight-when-flutters-tabbar-is-tapped

5条答案

按热度按时间

zwghvu4y1#

你也可以用下面的代码禁用涟漪/高亮/飞溅效果。用ThemeData的数据添加Theme，其中高亮和飞溅的颜色都是透明的。

return Scaffold(
  appBar: PreferredSize(
    preferredSize: Size.fromHeight(70),
      child: Theme(
        data: ThemeData(
        highlightColor: Colors.transparent,
        splashColor: Colors.transparent,
      ),
      child: AppBar( ... )

赞(0）回复(0）举报 2023-01-27

rt4zxlrg2#

这就是涟漪效应。你可以通过将其包裹在Container中并赋予其透明颜色来移除它。

赞(0）回复(0）举报 2023-01-27

kninwzqo3#

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

TabBar(splashFactory: NoSplash.splashFactory,)

How to disable default Widget splash effect in Flutter?

赞(0）回复(0）举报 2023-01-27

n7taea2i4#

这是我从@Tempelriter定制的解决方案

Theme(
        data: Theme.of(context).copyWith(
          highlightColor: Colors.transparent,
          splashColor: Colors.transparent,
        ),
        child: Container(
          decoration: BoxDecoration(
            color: Colors.gray,
            border: Border.all(
              color: Colors.red
            ),
            borderRadius: BorderRadius.circular(50),
          ),
          child: TabBar(
            isScrollable: true,
            tabs: [
              Tab(text: 'comingSoon'),
              Tab(text: 'selling'),
            ],
          ),
        ),
      );

赞(0）回复(0）举报 2023-01-27

du7egjpx5#

我也遇到过类似的问题。我试着阅读文档并找到了它。

///
  /// 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)

赞(0）回复(0）举报 2023-01-27

我来回答

点击Flutter的TabBar时移除高亮显示

5条答案

相关问题

热门标签

最新问答