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

【问题标题】：Widgets stacking at the bottom when animating a PageRoute Transition为 PageRoute 过渡设置动画时，小部件堆叠在底部
【发布时间】：2020-05-20 15:31:31
【问题描述】：

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

我做了一个自定义的 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：尝试从左侧进入屏幕并推出当前屏幕的动画。退出屏幕时在底部重新绘制退出屏幕小部件。

感谢您的帮助。

【问题讨论】：

标签： animation flutter flutter-layout flutter-animation

【解决方案1】：

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

【讨论】：