Flutter開發之導航與路由管理

Route

所謂路由管理，就是管理頁面之間如何跳轉，也被稱爲導航管理。這和原生開發相似，不管是Android仍是iOS，導航管理都是經過維護一個路由棧來實現的，路由入棧(push)操做對應打開一個新頁面，路由出棧(pop)操做對應頁面關閉操做。在Flutter開發中，實現頁面跳轉須要同時使用Route 和 Navigator。

• Route是一個應用程序抽象的屏幕或頁面；
• Navigator 是一個管理路由的widget；

路由(Route)，在移動開發中一般用來表示移動應用的頁面（Page），具體來講，Route在Android中一般指一個Activity，在iOS中指一個ViewController。

Navigator是一個路由管理的widget，它經過一個棧來管理一個路由widget集合。一般當前屏幕顯示的頁面就是棧頂的路由，Navigator提供了一系列方法來管理路由棧。

示例

爲了說明Flutter是如何實現路由跳轉的，咱們建立兩個頁面：NewRoute.dart和main.dart。
其中，NewRoute.dart的源碼以下：

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

class SecondPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
          title: new Text('新頁面')
      ),
      body: new Center(
        child: new Text(
          '點擊浮動按鈕返回首頁',
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: () {
             Navigator.of(context).pop();
        },
        child: new Icon(Icons.replay),
      ),
    );
  }
}

新路由繼承自StatelessWidget，界面很簡單，在頁面中間顯示一句"This is new route"。而後，修改main.dart的源碼以下：

import 'package:flutter/material.dart';
import 'package:flutter_demo/SecondPage.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: '路由管理首頁'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Text(
          '點擊浮動按鈕打開新頁面',
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: () {
          Navigator.push(
              context, MaterialPageRoute(builder: (context) => SecondPage()));
        },
        child: new Icon(Icons.open_in_new),
      ),
    );
  }
}

運行上面的代碼，當咱們點擊按鈕後，路由就會打開一個新的路由頁面，以下圖：

MaterialPageRoute

MaterialPageRoute繼承自PageRoute類，PageRoute類是一個抽象類，表示佔有整個屏幕空間的一個模態路由頁面，它還定義了路由構建及切換時過渡動畫的相關接口及屬性。MaterialPageRoute 是Material組件庫的一個Widget，它能夠針對不一樣平臺，實現與平臺頁面切換動畫風格一致的路由切換動畫，具體來講：

• 對於Android，當打開新頁面時，新的頁面會從屏幕底部滑動到屏幕頂部；當關閉頁面時，當前頁面會從屏幕頂部滑動到屏幕底部後消失，同時上一個頁面會顯示到屏幕上。
• 對於iOS，當打開頁面時，新的頁面會從屏幕右側邊緣一致滑動到屏幕左邊，直到新頁面所有顯示到屏幕上，而上一個頁面則會從當前屏幕滑動到屏幕左側而消失；當關閉頁面時，正好相反，當前頁面會從屏幕右側滑出，同時上一個頁面會從屏幕左側滑入。

咱們使用MaterialPageRoute來完成路由跳轉時，MaterialPageRoute構造函數提供了幾個的，參數，格式以下：

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

這些參數的具體含義以下：

• builder 是一個WidgetBuilder類型的回調函數，它的做用是構建路由頁面的具體內容，返回值是一個widget。咱們一般要實現此回調，返回新路由的實例。
• settings 包含路由的配置信息，如路由名稱、是否初始路由（首頁）。
• maintainState：默認狀況下，當入棧一個新路由時，原來的路由仍然會被保存在內存中，若是想在路由沒用的時候釋放其所佔用的全部資源，能夠設置maintainState爲false。
• fullscreenDialog表示新的路由頁面是不是一個全屏的模態對話框，在iOS中，若是fullscreenDialog爲true，新頁面將會從屏幕底部滑入（而不是水平方向）。

Navigator

Navigator是Flutter應用開發中的一個路由管理的widget，它經過一個棧來管理一個路由widget集合。一般，當前屏幕顯示的頁面就是棧頂的路由。Navigator提供了一系列方法來管理路由棧，咱們可使用 push 和 pop 兩個操做來進行頁面的入棧和出棧。

push

將給定的路由入棧（即打開新的頁面），返回值是一個Future對象，用以接收新路由出棧（即關閉）時的返回數據。

執行push 操做時，咱們主要使用兩個方法：一個是直接 push 一個路由，另一個是 pushNamed 一個命名路由地址。

push方式

下邊是 Navigator.push 的源碼，入參的 Route 對象中有一個 RouteSettings 成員變量，咱們能夠在構造 Route 對象的時候將須要傳遞的參數放在 RouteSettings 中。

@optionalTypeArgs
static Future<T> push<T extends Object>(BuildContext context, Route<T> route) {
  return Navigator.of(context).push(route);
}

若是涉及到傳遞參數，那麼咱們能夠將參數放在 SecondScreen 的構造函數中，也能夠放在構造的 MaterialPageRoute 的 RouteSettings 中。

Navigator.push(
  context,
  new MaterialPageRoute(builder: (context) => new SecondScreen()),
).then((data){
  //接受返回的參數
  print(data.toString());
};

pushNamed方式

pushNamed方式的實現最終調用的也是 push 方法，這中方法直接暴露了參數 Object arguments ，源碼以下：

@optionalTypeArgs
static Future<T> pushNamed<T extends Object>(
  BuildContext context,
  String routeName, {
  Object arguments,
  }) {
  return Navigator.of(context).pushNamed<T>(routeName, arguments: arguments);
}
@optionalTypeArgs
Future<T> pushNamed<T extends Object>(
  String routeName, {
  Object arguments,
}) {
  return push<T>(_routeNamed<T>(routeName, arguments: arguments));
}

使用pushNamed方式時，須要將路由註冊到路由表中，例如：

Navigator.of(context)
  .pushNamed(
    '/route1',
    arguments: {
      "name": 'hello'
    }
    ).then((data){
      //接受返回的參數
      print(data.toString());
    };

pop

pop操做將棧頂路由出棧，入參爲一個 object 類型的對象，出參爲當前頁面關閉時返回給上一個頁面的數據。

pop的源碼以下：

@optionalTypeArgs
static bool pop<T extends Object>(BuildContext context, [ T result ]) {
  return Navigator.of(context).pop<T>(result);
}

pop的使用很是簡單，例如：

Navigator.of(context).pop("");  //能夠傳遞參數

兩個頁面之間跳轉，若是涉及到參數的傳遞，可使用下面的方式：

Navigator.of(context).pushNamed('/route1', arguments: {"name": 'hello'});

獲取參數時，可使用下面的方式：

class Page extends StatelessWidget{
  String name;
  @override
  Widget build(BuildContext context) {
    dynamic obj = ModalRoute.of(context).settings.arguments;
    if (obj != null && isNotEmpty(obj["name"])) {
      name = obj["name"];
    }
    return Material(
      child: Center(
        child: Text("this page name is ${name}"),
      ),
    );
  }
}

命名路由

所謂命名路由，就是給路由起一個名字，而後能夠經過路由名字直接打開新的路由。這爲路由管理帶來了一種直觀、簡單的方式，這和 Android 中的 ARrouter 頁面跳轉框架所定義的 path 很是的相似。

路由名稱按慣例使用相似路徑的結構，應用程序的主頁路由默認爲「/」，例如，'/ home' 表示 HomeScreen， '/ login' 表示 LoginScreen。

路由表

要想使用命名路由，咱們必須先提供並註冊一個路由表（routing table），這樣應用程序才知道哪一個名稱與哪一個路由Widget對應。路由表的定義以下：

Map<String, WidgetBuilder> routes;

它是一個Map， key 爲路由的名稱，是個字符串；value是個builder回調函數，用於生成相應的路由Widget。咱們在經過路由名稱入棧新路由時，應用會根據路由名稱在路由表中找到對應的WidgetBuilder回調函數，而後調用該回調函數生成路由widget並返回。

例如，咱們在建立 MaterialApp 的時候就有一個 routes 構造參數：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new MyHomePage(title: '應用程序首頁'),
      routes: <String, WidgetBuilder> {
        '/a': (BuildContext context) => new MyPage(title: 'A 頁面'),
        '/b': (BuildContext context) => new MyPage(title: 'B 頁面'),
        '/c': (BuildContext context) => new MyPage(title: 'C 頁面')
      },
    );
  }
}

註冊路由表

Flutter的路由註冊方式比較簡單，咱們回到以前「計數器」的示例，而後在MyApp類的build方法中找到MaterialApp，添加routes屬性，代碼以下：

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

這樣，使用routes的方式咱們就完成了路由表的註冊。如今，咱們就能夠經過路由名稱來打開新的路由。pushNamed跳轉的格式以下：

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

Navigator 除了pushNamed方法，還有pushReplacementNamed等其餘管理命名路由的方法，讀者能夠自行查看API文檔。接下來咱們經過路由名來打開新的路由頁，修改FlatButton的onPressed回調代碼：

onPressed: () {
  Navigator.pushNamed(context, "new_page");
  //Navigator.push(context,
  //  new MaterialPageRoute(builder: (context) {
  //  return new NewRoute();
  //}));  
},

命名路由傳參

在Flutter最初的版本中，命名路由是不能進行傳遞參數的，後來才支持了參數。例如，下面展現命名路由如何傳遞並獲取路由參數，首先，註冊一個路由：

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

而後，在路由頁經過RouteSetting對象獲取路由參數，例如：

class EchoRoute extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    //獲取路由參數  
    var args=ModalRoute.of(context).settings.arguments
    //...省略無關代碼
  }
}

而後，在打開路由時傳遞參數：

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