Flutter开发之路由与导航

时间 2019-12-16

原文原文链接

基本概念

若是说构成视图元素的基本单位是组件，那么构成应用程序的基本单位就是页面。对于拥有多个页面的应用程序而言，如何从一个页面平滑地过渡到另外一个页面，是技术框架须要考虑的问题。css

在前端开发中，可使用路由框架来统一管理页面及它们之间的跳转。在Android中路由指的是一个Activity，在iOS中指的是一个ViewController，能够经过startActivity或pushViewController来打开一个新的路由。在Flutter中，路由的管理和导航借鉴了前端和客户端的设计思路，须要使用Route和Navigator来进行统一管理。前端

其中，Route是页面的抽象，主要负责建立界面、接收参数以及响应导航器Navigator的打开与关闭。而Navigator则用于维护路由栈管理，Route打开即入栈，Route关闭即出栈，固然还能够替换栈内的某一个Route。做为官方提供的路由管理组件，Navigator提供了一系列方法来管理路由栈，其中最经常使用的两个方法是push()和pop()，它们的含义以下。app

push()：将给定的路由入栈，返回值是一个Future对象，用以接收路由出栈时的返回数据。
pop()：将栈顶路由出栈，返回结果为页面关闭时返回给上一个页面的数据。

除了push()和pop()方法外，Navigator还提供了不少其它实用的方法，如replace()、removeRoute()和popUntil()等，能够根据使用场景合理的选取。框架

根据是否须要提早注册页面标识符，Flutter中的路由管理能够分为基本路由和命名路由两种。less

基本路由：无需提早注册，在页面切换时须要手动构造页面的实例。
命名路由：须要提早注册页面标识符，在页面切换时经过标识符直接打开新的路由。

下面就让咱们重点来看一下Flutter中的路由管理的基本路由和命名路由等相关知识。ide

基本路由

在Flutter开发中，基本路由的使用方式和原生Android、iOS打开新页面的方式很是相似。要打开一个新的页面，只须要建立一个MaterialPageRoute对象实例，而后调用Navigator.push()方法将新页面压到路由堆栈的顶部便可，若是要返回上一个页面，则能够调用Navigator.pop()方法。模块化

其中，MaterialPageRoute是一种路由模板，定义了路由建立以及路由切换过渡动画的相关配置，该配置能够根据不一样的平台实现与平台页面切换动画风格一致的路由切换动画。下面是使用Navigator实现页面跳转的示例，代码以下。函数

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('第一个页面'),
      ),
      body: Center(
        child: RaisedButton(
            child: Text('跳转到第二个页面'),
            onPressed: () => Navigator.push(context,
                MaterialPageRoute(builder: (context) => SecondPage()))),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('第二个页面'),
      ),
      body: Center(
        child: RaisedButton(
            child: Text('返回上一个页面'),
 onPressed: () => Navigator.pop(context)),
      ),
    );
  }
}

复制代码

在上面的示例中，咱们建立了两个页面，每一个页面都包含一个按钮。当点击第一个页面上的按钮时将导航到第二个页面，点击第二个页面上的按钮将返回第一个页面。运行上面的代码，效果以下图所示。源码分析

能够发现，跳转页面使用的是Navigator.push()方法，该方法能够将一个新的路由添加到由Navigator管理的路由对象的栈顶。而建立新的路由对象使用的是MaterialPageRoute，MaterialPageRoute是PageRoute的子类，定义了路由建立及切换时过渡动画的相关接口及属性，而且自带页面切换动画，Android平台页面进入动画是向上滑动并淡出，退出是相反，iOS平台页面进入动画是从右侧滑入，退出则相反。

命名路由

基本路由的使用方式相对简单灵活，适用于应用中页面很少的场景。而对于应用中页面比较多的状况下，若是再使用基本路由方式，那么每次跳转一个新的页面都要手动建立MaterialPageRoute实例，而后再调用push()方法来打开一个新的页面，此时页面的管理和跳转就比较混乱。布局

为了不频繁的建立MaterialPageRoute实例，Flutter提供了另一种方式来简化路由管理，即命名路由。所谓命名路由，就是给页面起一个别名，而后使用页面的别名就能够打开它，使用此种方式来管理路由，使得路由的管理更加清晰直观。

要想经过别名来指定页面切换，必须先给应用程序MaterialApp提供一个页面名称映射规则，即路由表。路由表是一个Map<String,WidgetBuilder>的结构，其中key对应页面名字，value则是对应的页面，以下所示。

MaterialApp(
    ...          //其余配置
    routes:{                     //注册路由
      'first':(context)=>FirstPage(),
      'second':(context)=>SecondPage(),
},
initialRoute: 'first',            //初始路由页面
);

复制代码

在路由表中注册好页面后，而后就能够经过Navigator.pushNamed()方法来打开页面，以下所示。

Navigator.pushNamed(context,"second ");    // second表示页面别名
复制代码

不过，因为路由的注册和使用都采用字符串来标识，这就会带来一个问题，即若是打开一个不存在的路由页面。对应这类问题，移动应用有一个通用的解决方案，即跳转到一个统一的错误页面。在注册路由表时，Flutter提供了一个UnknownRoute属性，用来对未知的路由标识符进行统一的页面跳转处理，以下所示。

MaterialApp(
  …
routes:{},
   onUnknownRoute: (RouteSettings setting) => MaterialPageRoute(builder: (context) => UnknownPage()),       //错误路由处理，返回UnknownPage
);

class UnknownPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('错误路由'),
      ),
    );
  }
}

复制代码

路由嵌套

有时候，一个应用可能不止一个导航器，而是可能有多个导航器，将一个导航器嵌套在另外一个导航器的行为称为路由嵌套。路由嵌套在移动开发中是很常见的，好比，移动开发中常常会看到应用主页有底部导航栏，每一个底部导航栏又嵌套其余页面的状况，效果以下图所示。

要实现上面的示例效果，首先须要新建一个底部导航栏，而后再由底部导航栏去嵌套其余子路由。关于底部导航栏的实现，能够直接使用Scaffold布局组件的bottomNavigationBar属性实现，以下所示。

class MainPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MainPageState();
  }
}

class MainPageState extends State<MainPage> {
  int currentIndex = 0;       //底部导航栏索引
  final List<Widget> children = [
    HomePage(),          //首页
    MinePage(),           //个人
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: children[currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        onTap: onTabTapped,
        currentIndex: currentIndex,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('首页')),
          BottomNavigationBarItem(icon: Icon(Icons.person), title: Text('个人')),
        ],
      ),
    );
  }

  void onTabTapped(int index) {
    setState(() {
      currentIndex = index;
    });
  }
}

复制代码

而后，每一个底部导航栏会嵌套一个子路由，而后子路由再去管理对应的路由页面。在Flutter中，建立子路由须要使用Navigator组件，而且子路由的拦截须要使用onGenerateRoute属性，以下所示。

class HomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Navigator(
      initialRoute: 'first',
      onGenerateRoute: (RouteSettings settings) {
        WidgetBuilder builder;
        switch (settings.name) {
          case 'first':
            builder = (BuildContext context) => FirstPage();
            break;
          case 'second':
            builder = (BuildContext context) => SecondPage();
            break;
        }
        return new MaterialPageRoute(builder: builder, settings: settings);
      },
    );
  }
}

复制代码

运行上面的代码，当点击子路由页面上的按钮时，底部的导航栏栏并不会消失，这是由于子路由仅在本身的范围内有效。要想跳转到其余子路由管理的页面，就须要在根导航器中进行注册，也就是MaterialApp内部的导航器。

路由传参

在移动应用开发中，页面参数的传递也是一个比较常见的需求。为了知足不一样场景下页面跳转过程当中参数传递的需求，Flutter提供了路由参数机制，能够在打开路由时传递参数，而后在目标页面经过RouteSettings来获取页面传递的参数，以下所示。

Navigator.of(context).pushNamed("second ", arguments: " from first page");

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
//取出路由参数
    String msg = ModalRoute.of(context).settings.arguments as String; 
     …  //数据处理
  }
}

复制代码

除此以外，对于某些特定的页面，还须要在其关闭时回传页面处理的处理结果。这与Android提供的startActivityForResult()方法监听目标页面返回处理结果的场景相似，Flutter也提供了页面返回的参数机制。具体来讲，就是在使用push()方法打开目标页面时，能够设置目标页面关闭时监听函数来获取返回参数，当目标页面关闭路由时使用pop()方法回传参数便可。例如，下面是两个页面之间参数值传递和参数值回传，代码以下。

class FirstPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return FirstPageState();
  }
}

class FirstPageState extends State<FirstPage> {
  
String result = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Column(
        children: <Widget>[
          Text('from seconde page: ' + result, style: TextStyle(fontSize: 20)),
          RaisedButton(
              child: Text('跳转'),
              //使用then()获取目标页面返回参数
              onPressed: () => Navigator.of(context)
                  .pushNamed("second", arguments: "from first page")
                  .then((msg) => setState(() => result = msg)))
        ],
      )),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    String msg = ModalRoute.of(context).settings.arguments as String;

    return Scaffold(
        body: Center(
          child: Column(children: [
            Text('from first screen: ' + msg, style: TextStyle(fontSize: 20)),
            RaisedButton(
                child: Text('返回'),
                onPressed: () => Navigator.pop(context, "from second page"))
          ]),
        ));
  }
}

复制代码

运行上面的代码，能够看到，当SecondPage页面被关闭从新回到FirstPage页面时，FirstPage会把回传的参数值展现出来，最终效果以下图所示。

MaterialPageRoute

在使用路由过程当中，通过会使用到MaterialPageRoute类。MaterialPageRoute继承自PageRoute类，PageRoute类是一个抽象类，表示占有整个屏幕空间的一个模态路由页面，它还定义了路由构建及切换时过渡动画的相关接口及属性。

MaterialPageRoute 是Material组件库提供的组件，它能够针对不一样平台，实现与平台页面切换动画风格一致的路由切换动画：当打开页面时，新的页面会从屏幕右侧边缘一致滑动到屏幕左边，直到新页面所有显示到屏幕上，而上一个页面则会从当前屏幕滑动到屏幕左侧而消失；当关闭页面时，正好相反，当前页面会从屏幕右侧滑出，同时上一个页面会从屏幕左侧滑入。

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

MaterialPageRoute({
    @required this.builder,
    RouteSettings settings,
    this.maintainState = true,
    bool fullscreenDialog = false,
  }) 
复制代码

它们的具体含义以下：

builder ：是一个WidgetBuilder类型的回调函数，它的做用是构建路由页面的具体内容，返回值是一个widget。咱们一般要实现此回调，返回新路由的实例。
settings：包含路由的配置信息，如路由名称、是否初始路由（首页）。
maintainState：默认状况下，当入栈一个新路由时，原来的路由仍然会被保存在内存中，若是想在路由没用的时候释放其所占用的全部资源，能够设置maintainState为false。
fullscreenDialog：表示新的路由页面是不是一个全屏的模态对话框，在iOS中，若是fullscreenDialog为true，新页面将会从屏幕底部滑入（而不是水平方向）。

总结

Flutter 提供了基本路由和命名路由两种方式，来管理页面间的跳转。其中，基本路由须要本身手动建立页面实例，经过 Navigator.push 完成页面跳转；而命名路由须要提早注册页面标识符和页面建立方法，经过 Navigator.pushNamed 传入标识符实现页面跳转。

对于命名路由，若是咱们须要响应错误路由标识符，还须要一并注册 UnknownRoute。为了精细化控制路由切换，Flutter 提供了页面打开与页面关闭的参数机制，咱们能够在页面建立和目标页面关闭时，取出相应的参数。能够看到，关于路由导航，Flutter 综合了 Android、iOS 和 React 的特色，简洁而不失强大。

在中大型应用中，一般还会使用命名路由来管理页面间的切换。命名路由的最重要做用，就是创建了字符串标识符与各个页面之间的映射关系，使得各个页面之间彻底解耦，应用内页面的切换只须要经过一个字符串标识符就能够搞定，为后期模块化打好基础。

除此以外，嵌套路由和路由传参也是路由框架中比较核心的内容。本篇只是Flutter路由与导航的基本知识，后面将会从pushReplacementNamed 、 popAndPushNamed、pushNamedAndRemoveUntil和popUntil，以及第三方导航库和源码分析等方面来深刻介绍Flutter的路由开发与导航。