这篇文章主要介绍了Flutter路由管理和二次封装的方法是什么的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Flutter路由管理和二次封装的方法是什么文章都会有所收获，下面我们一起来看看吧。
在原生开发中，安卓和IOS自有控制页面（Activity、ViewControl)跳转的功能，在flutter中，路由管理变得更加统一灵活高效。
在 MaterialApp 中内置的路由管理，有两种操作方式：
两种方式各有优劣，项目中酌情选择，第一种方式更灵活，简单除暴，但无法统一管理，比较松散，第二种可以统一管理，使用路由name进行对应操作，但是传值、取值可能较麻烦。
前面说了，flutter中的页面也是组件，所以我们首先用Scaffold脚手架创建两个独立的页面：
HomePage 和
NextPage。用这两个页面来实现后续的所有需求：
无需声明组件，直接使用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中则是从右向左的滑入。
传值的话，应该一看就非常清楚，在对应页面设置数据属性，实例化时，直接设置即可，关键代码：
// HomePage...Navigator.push(context, MaterialPageRoute(builder: (ctx) { return NextPage( data: "Home Page Data", );}));...// NextPageclass NextPage extends StatelessWidget { String data; NextPage({this.data});...}...Navigator.pop(context);...上面说到的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
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");...返回上一页的方式，在两种管理方式中都是一样的，使用
Navigator.pop
...Navigator.pop(context, {"a": "反向传值"});...正向传值就有所不同，因为在未声明路由的方式中，我们可以直接接触到对应页面的对象，但是在声明路由的方式中，对应对象在声明时就已经创建好了，在跳转时无法直接获取到了，所以传值和获取的方式有所不同。
传值时，使用Navigator.pushNamed中的arguments参数：
...HomePage// 'NextPage' 已声明为 NextPage() 组件Navigator.pushNamed(context, "NextPage", arguments: "传值");...获取时，使用下面的代码：
... NextPage// 获取值var data = ModalRoute.of(context).settings.arguments;...和未声明的方式一致，Navigator.pushNamed同样返回Future。
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的简单封装，统一了全局的路由对象，路由名称使用了静态参数，跳转方式也进行了样式统一，页面拦截也很容易拓展：
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, ); } }}关于“Flutter路由管理和二次封装的方法是什么”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“Flutter路由管理和二次封装的方法是什么”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：http://blog.itpub.net/69981026/viewspace-2709424/
