Flutter十四：路由及导航

一、路由管理及相关概念

1. 路由

路由(Route)在移动开发中通常指页面（Page）或者屏幕（Screen），Route在Android中通常指一个Activity，在iOS中指一个ViewController。

2. 路由管理

路由管理是管理页面之间如何跳转，通常也可被称为导航管理。Flutter中的路由管理和原生开发类似，无论是Android还是iOS，导航管理都会维护一个路由栈，路由入栈(push)操作对应打开一个新页面，路由出栈(pop)操作对应页面关闭操作，而路由管理主要是指如何来管理路由栈。

二、路由基本使用

1. 页面跳转

Navigator.push将一个页面插入到栈的顶部，如下案例是点击条目跳转到WebScreen界面：

return InkWell(
      onTap: () {
        Navigator.push(context, MaterialPageRoute(builder: (context) {
          return WebViewScreen()
        }));
//或者
 Navigator.of(context).push(MaterialPageRoute(builder: (context) {
            return WebViewScreen();
          }));
      },

• 跳转并关闭：

Navigator.of(context).pushAndRemoveUntil(
        new MaterialPageRoute(builder: (context) => MainScreen()),
        (route) => route == null);

2.页面跳转传值

页面跳转有时是要传递数据，比如点击条目跳转到WebScreen需要带标题和地址过去，或者条目跳转到商品详情页需要带id过去，通过构造函数传值过去：

return InkWell(
      onTap: () {
        Navigator.push(context, MaterialPageRoute(builder: (context) {
          return WebViewScreen(title: item.title, url: item.link);
        }));
      },

3. 页面跳转回传值

类似安卓中的activity回传数据
①跳转并等待接收数据

class _AnflyScreen extends State<AnflyScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          onPressed: () {
            _navigationToBigflyScreen(context);
          },
          child: Text('跳转到Bigfly界面'),
        ),
      ),
    );
  }

  //跳转到第二个界面，必须声明为一个异步方法，因为我们要等待接收返回的数据
  void _navigationToBigflyScreen(BuildContext context) async {
    //压栈操作并等待返回数九
    final result = await Navigator.push(
        context, MaterialPageRoute(builder: (context) => BigflyScreen()));
    //读取并显示返回值
    Scaffold.of(context).showSnackBar(SnackBar(
      content: Text('$result'),
    ));
  }
}

②第二个页面带上参数出栈

class _BigflyScreen extends State<BigflyScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("BigflyScreen"),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('点我退出'),
          onPressed: () {
            Navigator.pop(context, "我是来自BigFly界面数据");
          },
        ),
      ),
    );
  }
}

三、三方路由框架Fluro