Flutter TabBarView的动画持续时间答案

【问题标题】：Animation duration of a flutter TabBarViewFlutter TabBarView的动画持续时间
【发布时间】：2019-10-30 03:56:02
【问题描述】：

在 Flutter 中我有以下问题。

我想控制 TabBarView 的动画速度（过渡持续时间）。在 TabBar 单击期间，内容主体从左向右滑动。我希望这是即时的。非常类似于底部的主 TabBar 图标的 Twitter 应用程序。

有没有办法控制 TabVarView 的动画（时长）？

【问题讨论】：

标签： animation flutter tabs tabview

【解决方案1】：

您可以控制滚动动画的一般物理特性。

TabBarView(
  physics: CustomTabBarViewScrollPhysics(),

控制滚动行为：


class CustomTabBarViewScrollPhysics extends ScrollPhysics {
  const CustomTabBarViewScrollPhysics({ScrollPhysics? parent})
      : super(parent: parent);

  @override
  CustomTabBarViewScrollPhysics applyTo(ScrollPhysics? ancestor) {
    return CustomTabBarViewScrollPhysics(parent: buildParent(ancestor)!);
  }

  @override
  SpringDescription get spring => const SpringDescription(
        mass: 50,
        stiffness: 100,
        damping: 0.8,
      );
}

您还应该能够计算质量、刚度、阻尼的持续时间，但我相信这些选项更适合您的问题。 Source

【讨论】：

【解决方案2】：

你不能直接用 TabBar 来做这件事！您应该创建一个 CustomTab 并在其上添加一个“Inkwell”。您应该将墨水池的 onTap 参数设置为：

() = tabController.animateTo(0, duration: Duration(milliseconds: 0));'

所以应该是这样的

Widget _buildTabItem({
  int index,
  ValueChanged<int> onPressed,
}) {
  return Expanded(
    child: Container(
      child: Material(
        type: MaterialType.transparency,
        child: InkWell(
          onTap: () => onPressed(index),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              /// Icon and text here
            ],
          ),
        ),
      ),
    ),
  );
}

【讨论】：

我有一个类似的方法来基本上构建一个自定义应用栏并手动处理 animateTo 但问题是我试图将 TabBarView 的动画持续时间减少到零秒。这种方法不会减少 TabBarView 页面过渡的动画。
不确定 Flutter 中是否存在错误，但 tabController.animateTo(0, duration: Duration(milliseconds: 0)); 对持续时间没有影响
相关 GitHub 问题：github.com/flutter/flutter/issues/55625