关于前端:Flutter-基础路由管理Fluro库的使用和二次封装

41次阅读

共计 5155 个字符，预计需要花费 13 分钟才能阅读完成。

在原生开发中，安卓和 IOS 自有管制页面（Activity、ViewControl)跳转的性能，在 flutter 中，路由治理变得更加对立灵便高效。

路由治理需要

在 Flutter 中，万物皆组件，页面也是组件，路由则是组件之间的跳转、传值，常见的需要有上面四种：

  1. 跳转下一页
  2. 返回上一页
  3. 正向传值
  4. 反向传值

咱们次要钻研这四种操作的形式，在每个我的项目中都必备的需要。

MaterialApp 内置的路由治理

在 MaterialApp 中内置的路由治理，有两种操作形式：

  1. 未声明路由，应用实例化组件间接跳转
  2. 申明路由，应用路由的名称进行跳转

两种形式各有优劣，我的项目中酌情抉择，第一种形式更灵便，简略除暴，但无奈对立治理，比拟涣散，第二种能够对立治理，应用路由 name 进行对应操作，然而传值、取值可能较麻烦。

后面说了，flutter 中的页面也是组件，所以咱们首先用 Scaffold 脚手架创立两个独立的页面：HomePage 和 NextPage。用这两个页面来实现后续的所有需要：

不申明路由

1. 跳转下一页

无需申明组件，间接应用 api 跳转到回调中的组件页面：

// 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("跳转到第二页"),
        ),
      ),
    );
  }
}

// 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，就能够进行疾速的页面跳转，其中要害跳转代码

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

因为是默认的跳转形式，在安卓和苹果端会有不同的动画成果：安卓中是从下到上的渐隐，而 ios 中则是从右向左的滑入。

2. 跳转传值

传值的话，应该一看就十分分明，在对应页面设置数据属性，实例化时，间接设置即可，要害代码：

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

3. 返回上一页

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

4. 反向传值

下面说到的 Navigator.pop 办法的第二个参数能够传递一个任何类型的数据，该参数就是反向传值的内容。

而首页中的 Navigator.push 办法返回一个 Future，就是出栈页面的 Navigator.pop 函数的第二个参数，咱们应用 async 和 await 能够疾速的获取其中的内容：

//
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("跳转到第二页"),
        ),
      ),
    );
  }
}

//
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": "反向传值内容"});
              },
              child: Text("返回上一页"),
            )
          ],
        ),
      ),
    );
  }
}

跳转到 NextPage 后点击返回上一页，能够看到控制台输入内容：

I/flutter (11371): Next Page 返回给 Home Page：{data: 反向传值内容}

这是靠 Navigator.pop 函数进行的返回传值操作，如果点击页面 AppBar 中的返回图标返回值则为 null

申明路由

1. 跳转到下一页

MaterialApp 内置了路由治理性能，在 MaterialApp 类中的 routes 参数中申明路由名称和对应组件：

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

在申明了名称和组件后，咱们就能够间接应用 name 来进行路由操作：

...
// 'NextPage' 已申明为 NextPage() 组件
Navigator.pushNamed(context, "NextPage");
...

2. 返回上一页

返回上一页的形式，在两种治理形式中都是一样的，应用 Navigator.pop

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

3. 正向传值

正向传值就有所不同，因为在未声明路由的形式中，咱们能够间接接触到对应页面的对象，然而在申明路由的形式中，对应对象在申明时就曾经创立好了，在跳转时无奈间接获取到了，所以传值和获取的形式有所不同。

传值时，应用 Navigator.pushNamed 中的 arguments 参数：

...HomePage
// 'NextPage' 已申明为 NextPage() 组件
Navigator.pushNamed(context, "NextPage", arguments: "传值");
...

获取时，应用上面的代码：

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

4. 反向传值

和未声明的形式统一，Navigator.pushNamed同样返回 Future。

Fluro 路由库

flutter 的呈现，随之诞生了一批优良的库，fluro 就是其中之一。

它更灵便、耦合更低、反对各种页面切换动画，进行简略的二次封装就能够实现轻松的路由治理、权限拦挡。

根本应用

fluro 是须要提前对路由进行申明的，而且所有的路由操作都须要实用全局的 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("跳转到第二页"),
        ),
      ),
    );
  }
}

//
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("返回上一页"),
            )
          ],
        ),
      ),
    );
  }
}

咱们能够通过批改跳转动画 TransitionType.cupertino 来实现在安卓端显示 ios 的滑入滑出成果。

fluro 二次封装类

上面是对 fluro 的简略封装，对立了全局的路由对象，路由名称应用了动态参数，跳转形式也进行了款式对立，页面拦挡也很容易拓展：

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: 验证权限，再决定向哪跳转
    var auth = true;
    if (auth) {
      return router.navigateTo(
        context,
        path,
        transition: TransitionType.nativeModal,
      );
    } else {
    // 验证失败，跳转到了首页
      return router.navigateTo(
        context,
        HomePage,
        transition: TransitionType.nativeModal,
      );
    }
  }
}

简略封装，能够留言发表不同的思路！

正文完
前端
发表至： 前端
2020-08-05
 0
关于前端:vueRouter-push问题的思考
js-预编译流程解析变量提升
babylonjs-followCamera
关于前端:20-个值得学习的-Vue-开源项目