首先是点击按钮滑动跳转页面的效果:
这里使用的是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),
效果则会变成从下到上