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

Question

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

喜欢 a1 和 a2：

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

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

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

谢谢！

Answer 1

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

1。创建新的 showDialog() 方法

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

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

new_dialog.dart

Future<T> showNewDialog<T>(

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

We only reuse showGeneralDialog() method, and customized its animation-related parameters : its transitionDuration for Duration and its transitionBuilder as Animating component.

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。显示我们的新对话框

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

main.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 与 Transition builder

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

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

显示对话框
显示通用对话框
_DialogRoute
弹出路由
模态路由等等 ...

Take look at buildTransitions method _DialogRoute which return FadeTransition by default.

正如我所尝试的，如果我们通过调用 showGeneralDialog 放置 transitionBuilder : null，该应用程序将显示对话框并且仍然有动画。

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

相反，如果我们将 pageBuilder : null，通过调用 showGeneralDialog，应用程序将不显示任何内容。

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

  );

我们可以得出结论：

pageBuilder 虽然有一些参数 Animation 和 SecondaryAnimation，用于定义Widget显示。
transitionBuilder 用于定义动画 处理后，作为 Flutter 显示 Dialog

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

Is it possible to change the default animation of showGeneralDialog() in flutter?

dart

flutter

flutter-animation

1。创建新的 showDialog() 方法

2。定义新的动画组件

3。显示我们的新对话框

存储库

演示

pageBuilder 与 Transition builder