如何在 Flutter 中禁用 TabBar 项的突出显示和飞溅行为

Question

我只想在点击选项卡项时禁用或更改highlightColor和splashColor行为？

我的代码段，

SliverAppBar(
    backgroundColor: MyColors.darkGreen,
    elevation: 0.0,
    automaticallyImplyLeading: false,
    bottom: TabBar(
      isScrollable: true,
      unselectedLabelColor: Colors.grey,
      labelColor: Colors.white,
      onTap: (int itemIndex) {},
      indicatorSize: TabBarIndicatorSize.tab,
      indicator: BubbleTabIndicator(
        indicatorHeight: 25.0,
        indicatorColor: Colors.white38,
        tabBarIndicatorSize: TabBarIndicatorSize.tab,
      ),
      tabs: tabs,
      controller: _tabController,
    ),
    pinned: true,
    floating: false,
    title: _titleWidget,
),

指导我如何制作。

Answer 1

对于任何寻求解决方案的人来说，Flutter 团队合并了一个 PR 来做到这一点。操作方法如下：

TabBar(
  splashFactory: NoSplash.splashFactory,
  overlayColor: MaterialStateProperty.resolveWith<Color?>(
    (Set<MaterialState> states) {
      // Use the default focused overlay color
      return states.contains(MaterialState.focused) ? null : Colors.transparent;
    }
  ),
  ...
)

以下是 PR 的链接：https://github.com/flutter/flutter/pull/96252

Answer 2

只需将您的AppBar内部主题与透明highlightColor和splashColor。
例如。

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

Answer 3

将此添加到 MaterialApp 内的 ThemeData 中。

return MaterialApp(
      theme: ThemeData(
        highlightColor: Colors.transparent,
        splashColor: Colors.transparent,
      ),
      onGenerateRoute: _routes,
      initialRoute: '/',
    );

如果您只想禁用该特定 TabBar 上的 splashColor / highlightColor，您可以将您的小部件包装在小Theme部件中。这将覆盖全局 ThemeData

Answer 4

遵循流程

在 MaterialApp 内遵循这个

return MaterialApp(
  theme: ThemeData(
        highlightColor: Colors.transparent,
        splashColor: Colors.transparent,
      ),
);

并在 TabBar 内遵循此属性

TabBar(
 overlayColor:MaterialStateProperty.all<Color>(Colors.transparent),
 // above property will remove splash color or it will provider whatever color you want
 tabs:<Widget>[
   Tab(),
 ],
),

希望对你有帮助！！谢谢。