是否可以在颤动中更改 showGeneralDialog() 的默认动画？

Question

我正在尝试自定义一个 showGeneralDialog 来显示我的 Transform.scale 动画。我只是想知道是否有办法将小部件的默认动画更改为弯曲动画？

喜欢 a1 和 a2 内：

      transitionBuilder: (context, a1, a2, widget) {

例如，我希望Transform.scale 具有bounceIn 效果。

另外，有人能解释一下transitionBuilder: (context, a1, a2, widget) {} 和pageBuilder: (context, animation1, animation2) {} 的showGeneralDialog 小部件的区别吗？以及如何正确使用它们？

谢谢！

Answer 1

是的，可以通过覆盖 transitionBuilder 参数来实现。

1。创建新的 showDialog() 方法

通常，开发人员使用 showDialog 来放置一些覆盖底层的对话框 屏幕。

在这个应用程序中，有新方法很方便，因此可以简单地重复使用 通过我们的应用程序。

new_dialog.dart

Future<T> showNewDialog<T>(

  return showGeneralDialog(
    ...
    transitionDuration: const Duration(milliseconds: 400),
    transitionBuilder: _buildNewTransition,
  );
}

我们只重用了showGeneralDialog()方法，并自定义了它的动画相关 参数：其transitionDuration 用于 Duration 及其transitionBuilder 作为动画组件。

2。定义新的动画组件

在这个演示中，我们通过将 child 小部件包装到 ScaleTransition。然后我们定义了它的曲线，而不是仅在curve 参数中，或者 在curve 和reverseCurve 中。

new_dialog.dart

Widget _buildNewTransition(
  BuildContext context,
  Animation<double> animation,
  Animation<double> secondaryAnimation,
  Widget child,
) {
  return ScaleTransition(
    scale: CurvedAnimation(
      parent: animation,
      curve: Curves.bounceIn,
      reverseCurve: Curves.bounceIn,
    ),
    child: child,
  );
}

3。显示我们的新对话框

最后，我们可以在应用程序的任何地方调用这个动画对话框 代码：

ma​​in.dart

RaisedButton.icon(
  icon: Icon(Icons.info_outline),
  label: Text("Open Dialog"),
  onPressed: () {
    showNewDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text("Bounce In"),
        );
      },
    );
  },
),

存储库

您可以在这里查看存储库。 Github

演示

pageBuilder 与过渡构建器

如果我们查看Flutter Repo 中的 DialogRoute 定义，我们可以得出结论

每个 showDialog() 方法都将按此顺序运行并传递参数：

1. 显示对话框
2. 显示常规对话框
3. _DialogRoute
4. 弹出路由
5. 模态路由 等等 ...

看看 buildTransitions 方法 _DialogRoute 默认返回 FadeTransition。

正如我所尝试的，如果我们把 transitionBuilder : null，通过调用 showGeneralDialog，应用程序将显示 Dialog 并且仍然有动画效果。

  return showGeneralDialog(
    ...,
    transitionBuilder: null,
  );

反之，如果我们把 pageBuilder : null，通过调用 showGeneralDialog，App 什么都不会显示。

  return showGeneralDialog(
    ...,
    pageBuilder: null,
    transitionBuilder: _buildNewTransition,

  );

我们可以得出结论：

• pageBuilder 虽然有一些参数Animation 和 SecondaryAnimation，用于定义Widget显示。

• transitionBuilder 用于定义动画 已处理，作为 Flutter 显示 Dialog