路由管理

MaterialPageRoute

MaterialPageRoute继承自PageRoute类，PageRoute是一个抽象类，表示占有整个屏幕空间的一个模态路由页面，它还定义了路由构建及切换时过度动画的相关接口及属性。它可以针对不同平台，实现与平台页面切换动画风格一致的路由切换动画（如果想自定义路由切换动画，可以自己继承PageRoute来实现）：

• 对于Android，当打开新页面时，新的页面会从屏幕底部滑动到屏幕顶部；当关闭时，当前页面会从屏幕顶部滑动到屏幕底部后消失，同时上一个页面会显示到屏幕丧。

• 对于IOS，当打开页面时，新的页面会从屏幕右侧边缘一直滑动到屏幕左边，直到新页面全部显示到屏幕上，而上一个页面则会从当前屏幕滑动到屏幕左边而消失；当关闭页面时，整好相反，当前页面会从屏幕右侧滑出，同时上一个页面会从屏幕左侧划入；

MaterialPageRoute构造函数各个参数的意义：

  MaterialPageRoute({
    WidgetBuilder builder,
    RouteSettings settings,
    bool maintainState = true,
    bool fullscreenDialog = false,
  })

• builder是一个WidgetBuilder类型的回调函数，它的作用是构建路由页面的具体内容，返回值是一个widget。

• settings包含路由的配置信息，如路由名称、是否初始路由。

• maintainState默认情况下，当入栈一个新路由时，原来的路由仍然会被保存在内存中，如果想在路由没有用的时候释放其所占用的所有资源，可以设置为false。

• fullscreenDialog表示新的路由页面是否是一个全屏的模态对话框，在ios中，如果为true，新页面将会从屏幕底部划入（而不是水平方向）。

常规使用方法：

//导航到新路由   
Navigator.push( context,
   MaterialPageRoute(builder: (context) {
       return NewRoute();
}));

Navigator

navigator是一个路由管理的组件，它提供了打开和退出路由页的方法。navigator通过一个栈来管理活动路由集合。通常当前屏幕展示的页面就是栈顶的路由。

1.Future push(BuildContext context，Route route)介绍

Navigator.push(context, MaterialPageRoute(builder: (context){
  return NewRoute();
}));
//等价于
Navigator.of(context).push(MaterialPageRoute(builder: (context){
  return NewRoute();
}))

将给定的路由入栈，返回值是一个Future对象，用以接收新路由出栈时的返回数据，如下：

var result = await Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) {
      return TipRoute(
        // 路由参数
        text: "我是提示xxxx",
      );
    },
  ),
);
//输出`TipRoute`路由返回结果
print("路由返回值: $result");

2.bool pop(BuildContext context,[result])

Navigator.pop(context, "我是返回值")
//等价于
Navigator.of(context).pop(context, "我是返回值")

将栈顶路由出栈，result为页面关闭时返回给上一个页面的数据。

 

命名路由

要想使用命名路由，必须先提供并注册一个路由表，路由表定义如下：

Map<String, WidgetBuilder> routes;

它是一个Map，key为路由的名字，是个字符串；value是个builder回调函数，用于生成相应的路由widget。通过路由名字打开新路由时，应用会根据路由名字在路由表中查找到对应的widgetBuilder回调函数，然后调用该回调函数生成路由widget并返回。

注册路由表

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  //注册路由表
  routes:{
   "new_page":(context) => NewRoute(),
  } ,
  home: MyHomePage(title: 'Flutter Demo Home Page'),
);

通过路由名打开新路由页

通过路由名称来打开新路由，可以使用Navigator的pushNamed方法：

Future pushNamed(BuildContext context, String routeName,{Object arguments})

使用案例：

 Navigator.pushNamed(context, "new_page");

命名路由参数传递

先注册一个路由：

 routes:{
   "new_page":(context) => EchoRoute(),
  } ,

在打开路由时传递参数

Navigator.pushNamed("new_page", arguments: "hi");

在EchoRoute路由页通过RouteSetting对象获取参数：

class EchoRoute extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    //获取路由参数  
    var args=ModalRoute.of(context).settings.arguments;
    //...省略无关代码
  }
}

路由生成钩子

MaterialApp有一个onGenerateRoute属性，它在打开命名路由时可能会被调用，之所以说可能，是因为当调用Navigator.pushNamed(...)打开命名路由时，如果指定的路由名在路由表已注册，则会调用路由表中的builder函数来生成路由组件；如果路由表中没有注册，才会调用onGenerateRoute来生成路由。onGenerateRoute回调签名如下：

MaterialApp(
  ... //省略无关代码
  onGenerateRoute:(RouteSettings settings){
      return MaterialPageRoute(builder: (context){
           String routeName = settings.name;
       // 如果访问的路由页需要登录，但当前未登录，则直接返回登录页路由，
       // 引导用户登录；其它情况则正常打开路由。
     }
   );
  }
);

 

另外MaterialApp还有一个onUnknownRoute属性效果和onGenerateRoute属性一样，但是优先顺序不一样，如果两个属性都设置了，那么程序只会走onGenerateRoute属性回调函数，也就是说优先顺序为onGenerateRoute > onUnknownRoute，具体使用代码如下：

MaterialApp(
  ... //省略无关代码
  onUnknownRoute: (RouteSettings settings) {
    return MaterialPageRoute(builder: (context) {
      String name = settings.name;
      print("onUnknownRoute name = $name");
      return NewRoute();
    });
  }
);

 

另外MaterialApp还有一个navigatorObservers属性，这是个监听器集合，可根据不同需求对路由做不同的设置。但它们只能观察在路由注册表里边的路由。

new MaterialApp(
      navigatorObservers: [
        MyObserver(),
      ],
    );
//继承NavigatorObserver
class MyObserver extends NavigatorObserver{
  @override
  void didPush(Route route, Route previousRoute) {
    // 进入路由时回调
  }
  @override
  void didPop(Route route, Route previousRoute) {
    //弹出路由时回调
  }
  @override
  void didRemove(Route route, Route previousRoute) {
    //删除路由
  }
  @override
  void didReplace({Route newRoute, Route oldRoute}) {
    //新路由替换旧路由时回调
  }
}