为PageRoute过渡设置动画时，小部件堆叠在底部

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

想通了。HomePage中的小部件位于各自的类中，因此在过渡期间将调用其构建方法。通过在主页中本地创建窗口小部件，这些窗口小部件没有得到重建，现在过渡非常完美。