Flutter 注销并漂亮地替换堆栈

Question

在我的 Flutter 应用程序中的任意深度，用户可以通过点击按钮退出应用程序。如何用身份验证/登录屏幕替换当前的屏幕堆栈并为过渡提供“漂亮”的动画？

我目前正在执行以下操作，但动画一点也不漂亮。在 iOS 上，堆栈上的屏幕向右滑出，认证屏幕从右侧滑入。滑动太多。

NavigatorState navigatorState = Navigator.of(this.context);
while (navigatorState.canPop()) {
  navigatorState.pop();
}

Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (BuildContext context) {
    return AuthScreen();
  }),
);

我宁愿让认证屏幕在 iOS 上从底部向上滑动，并让认证屏幕在 Android 上以普通动画出现。然后移除堆栈中较低的所有屏幕。我找不到在 Flutter 中以这种方式操作堆栈的方法。

Answer 1

试试这个。

  Navigator.pushAndRemoveUntil(
      context,
      PageRouteBuilder(pageBuilder: (BuildContext context, Animation animation,
          Animation secondaryAnimation) {
        return AuthScreen();
      }, transitionsBuilder: (BuildContext context, Animation<double> animation,
          Animation<double> secondaryAnimation, Widget child) {
        return new SlideTransition(
          position: new Tween<Offset>(
            begin: const Offset(1.0, 0.0),
            end: Offset.zero,
          ).animate(animation),
          child: child,
        );
      }),
      (Route route) => false);

这里pushAndRemoveUntil将清除堆栈并推送新屏幕。

将PageRouteBuilder让你的动画在屏幕转换。您可以通过返回FadeTransition或任何您喜欢的方式来玩它。这样您就可以实现动画过渡。

Answer 2

如果您在 MaterialApp 中声明路线，例如：

MaterialApp(
  home: new Screen1(),
  routes: <String, WidgetBuilder> {
    '/AuthScreen': (BuildContext context) => new AuthScreen()
  },
)

您可以使用

Navigator.of(context).pushNamedAndRemoveUntil('/AuthScreen', (Route<dynamic> route) => false);

信息来源