Flutter路由跳转及参数传递

本文要介绍的知识点

• 用路由推出一个新页面
• 打开新页面时，传入参数
• 参数的回传

路由

做Android/iOS原生开发的时候，要打开一个新的页面，你得知道你的目标页面对象，然后初始化一个Intent或者ViewController，再通过startActivity或者pushViewController来推出一个新的页面，不能跟web一样，直接丢一个链接地址就跳转到新的页面。当然，可以自己去加一个中间层来实现这些功能。
Flutter里面是原生支持路由的。Flutter的framework提供了路由跳转的实现。我们可以直接使用这些功能。

Flutter路由介绍

Flutter里面有路由支持所有的路由场景，push、pop页面，页面间的参数传递等等。flutter里面的路由可以分成两种，一种是直接注册，不能传递参数。另一种要自己构造实例，可以传递参数。我们暂时把它们规为静态路由和动态路由。

静态路由的注册

在新建一个MD风格的App的时候，可以传入一个routes参数来定义路由。但是这里定义的路由是静态的，它不可以向下一个页面传递参数。

?

1 2 3 4 5 6 7 8 9 10 11 12

return new MaterialApp(       title: 'Flutter Demo',       theme: new ThemeData(         primarySwatch: Colors.blue,       ),       home: new MyHomePage(title: 'Flutter实例'),       routes: <String, WidgetBuilder> {         // 这里可以定义静态路由，不能传递参数         '/router/second': (_) => new SecondPage(),         '/router/home': (_) => new RouterHomePage(),       },     );

　　

静态路由的使用

push一个新页面,pushNamed方法是有一个Future的返回值的，所以静态路由也是可以接收下一个页面的返回值的。但是不能向下一个页面传递参数。

?

1 2 3 4 5 6 7

Navigator.of(context).pushNamed('/router/second');   // 带返回值 Navigator.of(context).pushNamed('/router/second').then((value) {                     // dialog显示返回值                     _showDialog(context, value);                   })

　　

pop回上一个页面

?

1	Navigator.of(context).pop('这个是要返回给上一个页面的数据');

　　

动态路由的使用

当需要向下一个页面传递参数时，要用到所谓的动态路由，自己生成页面对象，所以可以传递自己想要的参数。

?

1 2 3

Navigator.of(context).push(new MaterialPageRoute(builder: (_) {                     return new SecondPage(title: '路由是个好东西，要进一步封装');                   }));

　　

也可以用PageRouterBuilder来自定义打开动画

?

1 2 3 4 5 6 7 8 9 10 11 12 13

Navigator.of(context).push(new PageRouteBuilder(pageBuilder:             (BuildContext context, Animation<double> animation,                 Animation<double> secondaryAnimation) {           return new RefreshIndicatorDemo();         }, transitionsBuilder: (           BuildContext context,           Animation<double> animation,           Animation<double> secondaryAnimation,           Widget child,         ) {           // 添加一个平移动画           return BRouter.createTransition(animation, child);         }));

　　

平移的变换

?

1 2 3 4 5 6 7 8 9 10 11 12

/// 创建一个平移变换   /// 跳转过去查看源代码，可以看到有各种各样定义好的变换   static SlideTransition createTransition(       Animation<double> animation, Widget child) {     return new SlideTransition(       position: new Tween<Offset>(         begin: const Offset(1.0, 0.0),         end: const Offset(0.0, 0.0),       ).animate(animation),       child: child, // child is the value returned by pageBuilder     );   }