Flutter路由管理和二次封装的方法是什么-创新互联
这篇文章主要介绍了Flutter路由管理和二次封装的方法是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Flutter路由管理和二次封装的方法是什么文章都会有所收获,下面我们一起来看看吧。
创新互联2013年开创至今,是专业互联网技术服务公司,拥有项目做网站、成都网站设计网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元应县做网站,已为上家服务,为应县各地企业和个人服务,联系电话:028-86922220在原生开发中,安卓和IOS自有控制页面(Activity、ViewControl)跳转的功能,在flutter中,路由管理变得更加统一灵活高效。
MaterialApp 内置的路由管理
在 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",
);
}));
...
// NextPage
class 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: [
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。
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: [
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 PageTo(BuildContext context, String path) {
return router.navigateTo(
context,
path,
transition: TransitionType.nativeModal,
);
}
static Future 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路由管理和二次封装的方法是什么”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注创新互联-成都网站建设公司行业资讯频道。
本文标题:Flutter路由管理和二次封装的方法是什么-创新互联
URL地址:http://scyanting.com/article/hedjh.html