flutter - 是否可以在 flutter 中更改 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,
  );
}

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

2。定义新的动画组件

在这个演示中，我们通过将我们的 child 小部件包装到 缩放转换。然后我们定义它的曲线，而不是仅在 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 与 Transition builder

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

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

1. 显示对话框
2. 显示通用对话框
3. _DialogRoute
4. 弹出路由
5. 模态路线 等等 ...

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

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

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

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

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

  );

我们可以得出结论:

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

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