为 PageRoute Transition 设置动画时小部件堆叠在底部

Question

我正在尝试同时为从右侧滑入的屏幕和向左滑出的当前屏幕制作动画，就好像这两个屏幕连接在一起一样。

我做了一个自定义的 PageRouteBuilder 和转换如下：

class SlideInRightRoute extends PageRouteBuilder {
  final Widget exitPage;
  final Widget enterPage;
  SlideInRightRoute({this.exitPage, this.enterPage})
      : super(
            pageBuilder: (
              BuildContext context,
              Animation<double> animation,
              Animation<double> secondaryAnimation,
            ) =>
                enterPage,
            transitionsBuilder: (
              BuildContext context,
              Animation<double> animation,
              Animation<double> secondaryAnimation,
              Widget child,
            ) {
              var exitBegin = Offset.zero;
              var exitEnd = Offset(-1.0, 0.0);
              var exitTween = Tween(begin: exitBegin, end: exitEnd);

              var enterBegin = Offset(1.0, 0.0);
              var enterEnd = Offset.zero;
              var enterTween = Tween(begin: enterBegin, end: enterEnd);

              return Stack(
                children: <Widget>[
                  SlideTransition(
                    position: exitTween.animate(animation),
                    child: exitPage,
                  ),
                  SlideTransition(
                    position: enterTween.animate(animation),
                    child: enterPage,
                  )
                ],
              );
            });
}

退出画面为

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: kWhite,
      body: Column(
        children: <Widget>[
          Expanded(
            flex: 38,
            child: /* stack with containers, image, and icon */ ,
          ),
          Expanded(
            flex: 50,
            child: /* column with text widgets */,
          ),
          Expanded(
            flex: 12,
            child: /* container with text widget */,
          ),
        ],
      ),
    );
  }
}

进入画面只是一个带有文字的脚手架。

当我触发页面路由时，它几乎是完美的。退出屏幕向左滑出，新屏幕从右侧滑入。唯一的问题是退出屏幕中的小部件都快速下降到屏幕底部。当我导航回此屏幕时，小部件会暂时位于底部，然后在正确的位置重新绘制。

为什么会发生这种情况，如何让小部件在新页面转换时保持原样？

我有一种感觉，这是因为展开的框小部件可能在转换过程中不知道屏幕的大小或其他什么。

TLDR：尝试从左侧进入屏幕并推出当前屏幕的动画。退出屏幕小部件在屏幕退出时在底部重新绘制。

感谢您的帮助。

Answer 1

想通了。我在调用 SlideInRightRoute 时使用了错误的小部件。

为 PageRoute Transition 设置动画时小部件堆叠在底部

Widgets stacking at the bottom when animating a PageRoute Transition

animation

flutter

flutter-layout

flutter-animation