nav_router 0.0.2

flutter The lightest, easiest and most convenient route management!

Language: English | 中文简体

nav_router

flutter最简单/轻量/便捷的路由管理方案，支持各种路由动画，跳转/传参起来非常方便，跳转新页面只需：routePush(NewPage());

开始使用

添加依赖

dependencies:
  nav_router: any #具体版本自定义（any表示最新）

相关文章更新中..

然后使用flutter packages upgrade来更新flutter的插件包

示例项目

example文件夹中有一个非常漂亮的示例项目。看看这个。否则，请继续阅读以启动并运行。

配置

• 1.在MaterialApp的页面先导入我们的插件

import 'package:nav_router/nav_router.dart';

• 2.在MaterialApp的navigatorKey属性写上navGK值

  Widget build(BuildContext context) {
    return new MaterialApp(
      title: '',
      navigatorKey: navGK,
    );
  }

• 3.然后，我们就可以开始使用啦，下面是一个跳转页面的例子

Widget buildItem(RouteModel item) {
  return new FlatButton(
    onPressed: () => routePush(new NewPage()),
    child: new Text('点击跳转'),
  );
} 

• 4.如果我们想用其他路由动画跳转可以在后面添加跳转属性,比如：渐变动画

routePush(new NewPage(), RouterType.fade);

参数传递

方式1：

正常push新页面，但是在后面加上Then，后面的v就是我们跳转之后的页面带回来的数据，然后我们给它打印出来。

routePush(NewPage()).then((v) {
  print('I received::$v');
});

那么我们新页面就要pop返回值了，直接在pop然后括号里加上我们的参数，可以是任何类型的参数值，之后上面写的东西就能接收到我们这次返回并带过去的参数了。

FlatButton(
  onPressed: () {
    pop('This is the parameter');
  },
  child: Text('Return with parameters'),
),

方式2：

方式二可以用我们的NavData，先在我们要push到的页面添加NavData类型的参数接收,

class NewPage extends StatlessWidget {
  final NavData navData;

  NewPage({this.navData});
}

然后下面就判断这个navData是否为空，也就是上级是否有接收这个方法，如果有的话就带参数返回。

FlatButton(
  onPressed: () {
    if(navData == null) return;
    widget.navData('NavData mode parameter transmission');
    pop();
  },
  child: Text('Return with parameters'),
),

那么我们push的那个地方就可以用navData来接收值并且打印出来了。

routePush(NewPage(navData: (v) {
    print('I received::$v');
  }),
);

效果图

Flutter微信群

Flutter教程网：www.flutterj.com

Flutter交流QQ群：874592746

公众号

关注公众号“Flutter前线”，各种Flutter项目实战经验技巧，干活知识，Flutter面试题答案，等你来领取。

贡献者