Flutter 跳转路由 转场动画SlideTransition

首先是点击按钮滑动跳转页面的效果:

这里使用的是Flutter 官网的一些代码:

Navigator.push(
            context,
            PageRouteBuilder(//自定义路由
              pageBuilder: (context, a, _) => MyApp2(),//需要跳转的页面
              transitionsBuilder: (context, a, _, child) {
                const begin =
                    Offset(1, 0); //Offset是一个2D小部件,他将记录坐标轴的x,y前者为宽,后者为高
                const end = Offset.zero; //得到Offset.zero坐标值
                const curve = Curves.ease; //这是一个曲线动画
                var tween = Tween(begin: begin, end: end)
                    .chain(CurveTween(curve: curve)); //使用补间动画转换为动画
                return SlideTransition(
                  //转场动画//目前我认为只能用于跳转效果
                  position: a.drive(tween), //这里将获得一个新的动画
                  child: child,
                );
              },
            ),
          );

现在的效果是点击后页面2从右向左滑来,返回则是从左到右滑回去

如果将begin =Offset(1,0)改为(0,1),

效果则会变成从下到上

猜你喜欢

转载自blog.csdn.net/a3244005396/article/details/127995119