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

用户12840414

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

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

谢谢您的帮助。

用户12840414

弄清楚了。我在调用 SlideInRightRoute 时使用了错误的小部件。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

从Flutter中的PageRoute弹出时,在父屏幕中设置状态栏颜色

为什么React-Semantic-UI Transition无法为组件设置动画?

如何使用 AnimatedBuilder 小部件为颜色设置动画?扑

如何在 Flutter 中为小部件运动设置动画?

无法为CardView Android Transition创建图层

如何将Flutter Chip小部件的顶部和底部边距设置为零?

为 Android 中的小部件启用小部件设置按钮?

react-transition-group CSSTransition,条件为null

在 Django 中,将小部件设置为 DateInput 时,预填充 DateField 不起作用

为水平 ListView 内的小部件制作动画

React-transition-group Transition 在退出时不会触发动画

如何在Windows中为小部件设置主题?

Android为自定义TextView小部件设置字体

pyqt4 将图像设置为中央小部件

为 Flutter 的 Card 小部件设置特定高度

将值设置为jquery小部件滑块

从父窗口小部件设置 `MainAxisSize` 为 min

无法将ListView设置为LayoutBuilder窗口小部件(Flutter)

如何将图像设置为小部件上的按钮?

为每一天设置不同的颜色(小部件)

react-transition-group动画的布局中断

Transition Js动画循环无法正常工作

Nextjs + react-transition-group不设置动画

将 androidx 生命周期从 2.2.0-alpha03 更新为 alpha04 后,“androidx.transition.TransitionSet 无法转换为 android.transition.Transition”

为小部件设置背景图像并使其在 resizeEvent 中填充整个小部件

添加Transition改变了Jquery设置的位置

为空间小部件着色

如何从底部到顶部为元素的最大高度设置动画?

使用-webkit-transition时的文本定位