相信很多android的小伙伴都听过flutter了,甚至很多已经开始使用flutter了。但一般使用flutter都是用MaterialApp,然后像下面这样跳转:

Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context){
  return new SecondPage();
}));

那么我们怎么给跳转的页面加动画呢,代码如下:

return PageRouteBuilder<T>(
  pageBuilder: (BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) {
    return new SecondPage();
  },
  transitionsBuilder: (_, animation, __, child) {
    return ScaleTransition(
      scale: animation,
      child: child,
    );
  },
);

一般页面动画是全局的,大家应该发现了,第一次用的MaterialPageRoute,第二次改成PageRouteBuilder了,为啥呢。因为MaterialApp的全局动画实在PageTransitionsTheme里设置的。感兴趣的可以自己研究下。为啥我不说呢,因为MaterialApp是在WidgetsApp上封了一层,虽然更像安卓,但也导致我们学习的东西要增多,所以我们来看底层的WidgetsApp是怎么设置全局页面动画的:

class MyApp extends StatelessWidget {
  // This widget is the root of your application.

  @override
  Widget build(BuildContext context) {
    return WidgetsApp(
      routes: {
        //效果等同home:MyHomePage();
        '/': (context) => MyHomePage(),
        '/Second': (context) => SecondPage(),
      },
      pageRouteBuilder: <T>(RouteSettings settings, WidgetBuilder builder) {
        return PageRouteBuilder<T>(
          settings: settings,
          pageBuilder: (BuildContext context, Animation<double> animation,
              Animation<double> secondaryAnimation) {
            return builder(context);
          },
          transitionsBuilder: (_, animation, __, child) {
            return ScaleTransition(
              scale: animation,
              child: child,
            );
          },
        );
      },
      textStyle: Styles.getAppTextStyle(),
      color: Colors.white,
      title: 'Flutter Demo',
    );
  }
}

好了,设置页面路由动画就是这样,这里我们用的是静态路由。下节我们说下静态和动态路由,及其传值问题。

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐