Question

在我的Flutter应用程序中的任意深度，用户可以通过点击按钮退出该应用程序。如何用auth / login屏幕替换当前的屏幕堆栈，并使过渡过程具有“美丽”的动画？

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

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

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

我希望auth屏幕在iOS上从底部向上滑动，并使auth屏幕与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);

Source of information

颤抖的注销和更换堆栈精美

2 个答案: