Flutter路由管理和二次封裝的方法是什么

在原生開發(fā)中，安卓和IOS自有控制頁面（Activity、ViewControl)跳轉(zhuǎn)的功能，在flutter中，路由管理變得更加統(tǒng)一靈活高效。

MaterialApp 內(nèi)置的路由管理

在 MaterialApp 中內(nèi)置的路由管理，有兩種操作方式：

1. 未聲明路由，使用實(shí)例化組件直接跳轉(zhuǎn)
2. 聲明路由，使用路由的名稱進(jìn)行跳轉(zhuǎn)

兩種方式各有優(yōu)劣，項(xiàng)目中酌情選擇，第一種方式更靈活，簡單除暴，但無法統(tǒng)一管理，比較松散，第二種可以統(tǒng)一管理，使用路由name進(jìn)行對應(yīng)操作，但是傳值、取值可能較麻煩。

前面說了，flutter中的頁面也是組件，所以我們首先用Scaffold腳手架創(chuàng)建兩個(gè)獨(dú)立的頁面： HomePage 和 NextPage。用這兩個(gè)頁面來實(shí)現(xiàn)后續(xù)的所有需求：

無需聲明組件，直接使用api跳轉(zhuǎn)到回調(diào)中的組件頁面：

// HomePage 頁面
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Home Page"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.push(context, MaterialPageRoute(builder: (ctx) => NextPage()));
          },
          child: Text("跳轉(zhuǎn)到第二頁"),
        ),
      ),
    );
  }
}

// NextPage 頁面
class NextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Next Page"),
      ),
      body: Container(
        child: Text("Next Page"),
      ),
    );
  }
}

直接使用api，就可以進(jìn)行快速的頁面跳轉(zhuǎn)，其中關(guān)鍵跳轉(zhuǎn)代碼

...
Navigator.push(context, MaterialPageRoute(builder: (ctx) => NextPage()));
...

因?yàn)槭悄J(rèn)的跳轉(zhuǎn)方式，在安卓和蘋果端會(huì)有不同的動(dòng)畫效果：安卓中是從下到上的漸隱，而ios中則是從右向左的滑入。

傳值的話，應(yīng)該一看就非常清楚，在對應(yīng)頁面設(shè)置數(shù)據(jù)屬性，實(shí)例化時(shí)，直接設(shè)置即可，關(guān)鍵代碼：

// HomePage
...
Navigator.push(context, MaterialPageRoute(builder: (ctx) {
  return NextPage(
    data: "Home Page Data",
  );
}));
...
// NextPage
class NextPage extends StatelessWidget {
  String data;
  NextPage({this.data});
...
}

...
Navigator.pop(context);
...

上面說到的Navigator.pop方法的第二個(gè)參數(shù)可以傳遞一個(gè)任何類型的數(shù)據(jù)，該參數(shù)就是反向傳值的內(nèi)容。

而首頁中的Navigator.push方法返回一個(gè)Future，就是出棧頁面的Navigator.pop函數(shù)的第二個(gè)參數(shù)，我們使用async和await可以快速的獲取其中的內(nèi)容：

//
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Home Page"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () async {
            var returnData = await Navigator.push(context, MaterialPageRoute(builder: (ctx) => NextPage()));
            print("Next Page 返回給 Home Page： ${returnData}");
          },
          child: Text("跳轉(zhuǎn)到第二頁"),
        ),
      ),
    );
  }
}

//
class NextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Next Page"),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            RaisedButton(
              onPressed: () {
                Navigator.pop(context, {"data": "反向傳值內(nèi)容"});
              },
              child: Text("返回上一頁"),
            )
          ],
        ),
      ),
    );
  }
}

跳轉(zhuǎn)到NextPage后點(diǎn)擊返回上一頁，可以看到控制臺(tái)輸出內(nèi)容：

I/flutter (11371): Next Page 返回給 Home Page： {data: 反向傳值內(nèi)容}

這是靠Navigator.pop函數(shù)進(jìn)行的返回傳值操作，如果點(diǎn)擊頁面AppBar中的返回圖標(biāo)返回值則為 null

MaterialApp 內(nèi)置了路由管理功能，在 MaterialApp 類中的 routes 參數(shù)中聲明路由名稱和對應(yīng)組件：

class FeDemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {
        "/": (ctx) => HomePage(),
        "NextPage": (ctx) => NextPage(),
      },
    );
  }
}

在聲明了名稱和組件后，我們就可以直接使用name來進(jìn)行路由操作：

...
// 'NextPage' 已聲明為 NextPage() 組件
Navigator.pushNamed(context, "NextPage");
...

返回上一頁的方式，在兩種管理方式中都是一樣的，使用 Navigator.pop

...
Navigator.pop(context, {"a": "反向傳值"});
...

正向傳值就有所不同，因?yàn)樵谖绰暶髀酚傻姆绞街校覀兛梢灾苯咏佑|到對應(yīng)頁面的對象，但是在聲明路由的方式中，對應(yīng)對象在聲明時(shí)就已經(jīng)創(chuàng)建好了，在跳轉(zhuǎn)時(shí)無法直接獲取到了，所以傳值和獲取的方式有所不同。

傳值時(shí)，使用Navigator.pushNamed中的arguments參數(shù)：

...HomePage
// 'NextPage' 已聲明為 NextPage() 組件
Navigator.pushNamed(context, "NextPage", arguments: "傳值");
...

獲取時(shí)，使用下面的代碼：

... NextPage
// 獲取值
var data = ModalRoute.of(context).settings.arguments;
...

和未聲明的方式一致，Navigator.pushNamed同樣返回Future。

Fluro路由庫

flutter的出現(xiàn)，隨之誕生了一批優(yōu)秀的庫，fluro就是其中之一。

它更靈活、耦合更低、支持各種頁面切換動(dòng)畫，進(jìn)行簡單的二次封裝就可以實(shí)現(xiàn)輕松的路由管理、權(quán)限攔截。

fluro是需要提前對路由進(jìn)行聲明的，而且所有的路由操作都需要適用全局的Router對象。

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

final router = Router();

void main() {
  // 聲明路由
  router.define(
    "/NextPage",
    handler: Handler(
      handlerFunc: (ctx, params) {
        return NextPage();
      },
    ),
  );
  runApp(FeDemoApp());
}

class FeDemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

//
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Home Page"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () async {
            var returnData = await router.navigateTo(
              context,
              "/NextPage",
              transition: TransitionType.nativeModal,
            );
            print("返回值： ${returnData}");
          },
          child: Text("跳轉(zhuǎn)到第二頁"),
        ),
      ),
    );
  }
}

//
class NextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Next Page"),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            RaisedButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text("返回上一頁"),
            )
          ],
        ),
      ),
    );
  }
}

我們可以通過修改跳轉(zhuǎn)動(dòng)畫 TransitionType.cupertino 來實(shí)現(xiàn)在安卓端顯示ios的滑入滑出效果。

下面是對fluro的簡單封裝，統(tǒng)一了全局的路由對象，路由名稱使用了靜態(tài)參數(shù)，跳轉(zhuǎn)方式也進(jìn)行了樣式統(tǒng)一，頁面攔截也很容易拓展：

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

import 'main.dart' as Main;

class App {
  static final router = Router();

  static String HomePage = "/HomePage";
  static String NextPage = "/NextPage";

  // 初始化路由
  static void initRouter() {
    var routers = {
      "${HomePage}": Handler(
        handlerFunc: (ctx, params) => Main.HomePage(),
      ),
      "${NextPage}": Handler(
        handlerFunc: (ctx, params) => Main.NextPage(),
      ),
    };

    routers.forEach((key, value) {
      router.define(key, handler: value);
    });
  }

  static Future<dynamic> PageTo(BuildContext context, String path) {
    return router.navigateTo(
      context,
      path,
      transition: TransitionType.nativeModal,
    );
  }

  static Future<dynamic> AuthTo(BuildContext context, String path) {
    // TODO: 驗(yàn)證權(quán)限，再?zèng)Q定向哪跳轉(zhuǎn)
    var auth = true;
    if (auth) {
      return router.navigateTo(
        context,
        path,
        transition: TransitionType.nativeModal,
      );
    } else {
    // 驗(yàn)證失敗，跳轉(zhuǎn)到了首頁
      return router.navigateTo(
        context,
        HomePage,
        transition: TransitionType.nativeModal,
      );
    }
  }
}