Flutter 注销并漂亮地替换堆栈

Posted 2023-02-23

【中文标题】Flutter 注销并漂亮地替换堆栈

【英文标题】：Flutter Log Out & Replace Stack Beautifully

【发布时间】：2019-08-30 08:32:52

【问题描述】：

在我的 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 中以这种方式操作堆栈的方法。

【参考方案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 或任何您喜欢的方式来使用它。这样就可以实现动画过渡了。

【参考方案2】：

如果你在你的 MaterialApp 中声明路由就好了。

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

你可以使用

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

Source of information

【讨论】：

好答案！你能解释一下这个论点是什么吗？ (路线 路线) => 假