如何在 Flutter 中去除 tabbarview 的蓝色/灰色滚动动画？答案

【问题标题】：How to remove blue/grey scroll animation of tabbarview in Flutter?如何在 Flutter 中去除 tabbarview 的蓝色/灰色滚动动画？
【发布时间】：2020-01-02 21:14:53
【问题描述】：

当从一个页面滑动到另一个飞溅出现在页面的最一侧时，我有一个 TabBarview。我不希望飞溅亮点出现在两侧。

虽然 tabbarview 具有物理特性，并且当设置为 bouncingscrollphysics() 时，此形状不应出现，就像列表视图中发生的那样，但没有任何改变。

尝试了另一种解决方案：我用主题包装了 tabbarview，并将突出显示颜色和初始颜色更改为 colors.transparent，但这也不起作用。这是我的 TabBarview 的代码。这是用户界面，以及它的外观。

 Theme(
                  data: new ThemeData(
                      splashColor: Colors.transparent,
                      highlightColor: Colors.transparent),
                  child: TabBarView(
                    physics: BouncingScrollPhysics(),
                    controller: _controller,
                    children: model.types.map((String type) {
                      List<Subscription> subssOfThisType =
                          model.historySubscription.where((Subscription sub) {
                        return sub.package.name == type;
                      }).toList();

                      final cards = subssOfThisType.map(
                        (s) {
                          return HistoryCard(
                            sub: s,
                          );
                        },
                      ).toList();

                      return ListView(
                        physics: BouncingScrollPhysics(),
                        padding:
                            EdgeInsets.symmetric(horizontal: 14, vertical: 8),
                        children: cards ?? Container(),
                      );
                    }).toList(),
                  ),
                )

【问题讨论】：

标签： flutter splash-screen tabbar

【解决方案1】：

如果您不想对 TabBar hten 的原始代码进行一些重大更改，请使用以下包

https://pub.dev/packages/flutter_tab_bar_no_ripple

=== 对于您的用例 ===

为了简单起见...将物理更改为 BouncingScrollPhysics()

如果您不想要那种有弹性的效果，请查看下面的链接

https://stackoverflow.com/a/51119796/10104608

【讨论】：

这是我做的，你可以在上面找到编辑。但是，它不起作用
材质小部件中将设置哪个属性？
不幸的是它对我不起作用，因为我需要原始标签栏中的点击功能
尝试使用它提供的控制器...如果它适合您的需要。
你的意思是标签栏视图中的控制器？

【解决方案2】：

将物理更改为 BouncingScrollPhysics()

【讨论】：

【解决方案3】：

您想试试 ScrollConfiguration 吗？

效果很好。

body: ScrollConfiguration(
  behavior: MyBehavior(),
  child: const TabBarView(
    children: [
      TabPage(icon: Icons.directions_car),
      TabPage(icon: Icons.directions_bike),
    ],
  ),
),

class MyBehavior extends ScrollBehavior {
  @override
  Widget buildViewportChrome(
      BuildContext context, Widget child, AxisDirection axisDirection) {
    return child;
  }
}

https://stackoverflow.com/a/51119796/9819094

【讨论】：