如何在 Flutter 中禁用 TabBar 项的高亮和飞溅行为答案

【问题标题】：How to disable highlight and splash behavior of TabBar item in Flutter如何在 Flutter 中禁用 TabBar 项的高亮和飞溅行为
【发布时间】：2020-03-19 03:23:40
【问题描述】：

我只想在点击选项卡项时禁用或更改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,
),

指导我如何制作。

【问题讨论】：

标签： flutter dart

【解决方案1】：

将此添加到 MaterialApp 中的 ThemeData 中。

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

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

【讨论】：

【解决方案2】：

只需将您的AppBar 放入主题中，并带有透明的highlightColor 和splashColor。
例如。

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

【讨论】：

【解决方案3】：

您只能将 TabBar 包裹在 Theme() 中并设置 splashColor

Theme(
  data: ThemeData().copyWith(
    splashColor: Colors.transparent),
  child: TabBar(
    ...)
)

【讨论】：