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过渡设置动画时，小部件堆叠在底部

1 个答案: