flutter 页面跳转动画 SlideTransition

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

Navigator.push(
            context,
            PageRouteBuilder(//自定义路由
              pageBuilder: (context, a, _) => page(),//需要跳转的页面
              transitionsBuilder: (context, animated, _, child) {
                return SlideTransition(
                  //转场动画
                  position: Tween(
                    begin: Offset(1,0), //Offset一个2D小部件,将记录坐标轴的x=宽,y=高
                    end: Offset.zero,//动画曲线
                  ).animate(animated),//获得动画
                  child: child,
                );
              },
            ),
          );

Flutter 是 Google 的一个开源移动应用开发框架,用于开发跨平台的iOS和Android应用程序。在Flutter中,页面跳转通常是通过导航器(Navigator)实现的。以下是Flutter页面跳转的基本方法: 1. 使用`Navigator.push()`方法进行页面跳转,跳转到新页面时,需要传入一个MaterialApp的路由(Route)对象。例如: ```dart Navigator.push( context, MaterialPageRoute(builder: (context) => SecondPage()), ); ``` 这将把当前页面替换为`SecondPage`页面。 2. 使用`Navigator.pushReplacement()`方法进行页面跳转,这个方法同样需要传入一个MaterialApp的路由对象,但它会替换当前页面而不是在栈上添加新页面。例如: ```dart Navigator.pushReplacement( context, MaterialPageRoute(builder: (context) => SecondPage()), ); ``` 这将用`SecondPage`替换掉当前页面。 3. 使用`Navigator.pushNamed()`方法进行页面跳转,如果你为路由指定了名字(route name),则可以使用这个方法通过名字来进行页面跳转。首先需要在MaterialApp中注册路由,如下: ```dart MaterialApp( routes: { '/first': (context) => FirstPage(), '/second': (context) => SecondPage(), }, ); ``` 然后通过以下方式跳转: ```dart Navigator.pushNamed(context, '/second'); ``` 在进行页面跳转时,通常需要一个`context`参数,这个`context`通常是当前的BuildContext,它是Flutter的构建系统的一部分,用于查找当前屏幕中的widget。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值