话不多说,这篇文章将会涉及技术面如下:
- 基本配置
- 简单的push
- 带多个字符串参数的push,及接收参数
- 带多个Model参数的push,及接收参数
- 简单的pop
- 带参数的pop
- 多级pop
- 指定界面的pop
- pop到根界面
使用Fluro之前需要先在pubspec.yaml文件中添加Fluro依赖，如下所示。
dependencies:
fluro: "^1.6.3"
成功添加Fluro库依赖后，就可以使用Fluro进行应用的路由管理与导航开发了。为了方便对路由进行统一的管理，首先需要新建一个路由映射文件，用来对每个路由进行管理。如下所示，是路由配置文件route_handles.dart的示例代码。
import 'package:flutter/material.dart';
import 'package:fluro/fluro.dart';
import 'package:flutter_app_fluro/LastPage.dart';
import 'package:flutter_app_fluro/ThirdPage.dart';
import 'package:flutter_app_fluro/login_model_entity.dart';
import 'dart:convert' as convert;
import 'HomePage.dart';
import 'Settings.dart';
import 'WebViewUrlPage.dart';
// 根目录
var rootHandler =
Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
return HomePage();
});
// 网页加载 - 示例：传多个字符串参数
var webViewHandler =
Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
String title = params['title']?.first;
String url = params['url']?.first;
return WebViewUrlPage(
title: title,
url: url,
);
});
var thirdHandler =
Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
return ThirdPage();
});
// 设置页 - 示例：不传参数
var settingHandler =
Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
return Settings();
});
// 最后一个页面 - 示例：传多个model参数
var lastHandler =
Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
LoginModelEntity model1 =
LoginModelEntity.fromJson(convert.jsonDecode(params['model1'][0]));
LoginModelEntity model2 =
LoginModelEntity.fromJson(convert.jsonDecode(params['model2'][0]));
return LastPage(model1: model1, model2: model2);
});
完成基本的路由配置后，还需要一个静态的路由总体配置文件，方便我们在路由页面中使用。如下所示，是路由总体配置文件Routes.dart的示例代码。
// 配置路径Route
import 'package:flutter/material.dart';
import 'package:fluro/fluro.dart';
import 'package:flutter_app_fluro/NoRoutePage.dart';
import 'route_handler.dart';
class Routes {
// 路由管理
static Router router;
static String root = '/'; // 根目录
static String setting = '/setting'; // 设置页
static String webView = '/webView'; // 网页加载
static String wxSharePay = '/wxSharePay'; // 测试model传参
static String third = '/thirdPage'; // 测试model传参
static String last = '/lastPage'; // 测试model传参
// 配置route
static void configureRoutes(Router router) {
// 未发现对应route
router.notFoundHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
print('!!!!!!!!route not found!!!!!!!!!');
return NoRoutePage();
});
router.define(root, handler: rootHandler); // 根目录
router.define(setting, handler: settingHandler); // 设置
router.define(webView, handler: webViewHandler); // 网页加载
// router.define(wxSharePay, handler: wxSharePayHandler); // 测试model传参
router.define(third, handler: thirdHandler); // 第三页
router.define(last, handler: lastHandler); // 最后一页
}
// 对参数进行encode，解决参数中有特殊字符，影响fluro路由匹配
static Future navigateTo(BuildContext context, String path, {Map<String, dynamic> params, TransitionType transition = TransitionType.native}) {
String query = "";
if (params != null) {
int index = 0;
for (var key in params.keys) {
var value = Uri.encodeComponent(params[key]);
if (index == 0) {
query = "?";
} else {
query = query + "\&";
}
query += "$key=$value";
index++;
}
}
print('我是navigateTo传递的参数：$query');
path = path + query;
return router.navigateTo(context, path, transition:transition);
}
}
上面代码中用到了几个页面,如下:
HomePage
WebViewUrlPage
ThirdPage
Settings
LastPage
这些界面建起来,也是为了测试用的,流程如下
image.png
HomePage 代码如下
import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'Routes.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("home"),
),
body: Center(
child: RaisedButton(
onPressed: (){
String title = "我是测试网页";
String url = "www.apple.com";
Map<String,dynamic> params = Map();
params['title'] = title;
params['url'] = url;
// Routes.navigateTo(context, Routes.third);
Routes.navigateTo(context, Routes.webView,params: params);
},
child: Text("home"),
),
),
);
}
}
WebViewUrlPage 代码如下
import 'package:flutter/material.dart';
import 'package:flutter_app_fluro/login_model_entity.dart';
import 'dart:convert' as convert;
import 'Routes.dart';
class WebViewUrlPage extends StatefulWidget {
String title;
String url;
WebViewUrlPage({this.title,this.url});
@override
_WebViewUrlPageState createState() => _WebViewUrlPageState();
}
class _WebViewUrlPageState extends State<WebViewUrlPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: RaisedButton(
onPressed: (){
Routes.navigateTo(context, Routes.third);
},
child: Text(widget.url),
),
),
);
}
}
ThirdPage 代码如下
import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'Routes.dart';
class ThirdPage extends StatefulWidget {
@override
_ThirdPageState createState() => _ThirdPageState();
}
class _ThirdPageState extends State<ThirdPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("third"),
),
body: Center(
child: RaisedButton(
onPressed: (){
Routes.navigateTo(context, Routes.setting).then((value) => print("third page value is $value"));
},
child: Text("third Page"),
),
),
);
}
}
Settings 代码如下
import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'dart:convert' as convert;
import 'Routes.dart';
import 'login_model_entity.dart';
class Settings extends StatefulWidget {
@override
_SettingsState createState() => _SettingsState();
}
class _SettingsState extends State<Settings> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("setting"),
),
body: Center(
child: RaisedButton(
onPressed: (){
LoginModelEntity modelEntity1 = LoginModelEntity();
modelEntity1.code = "100";
modelEntity1.ts = "11111";
modelEntity1.msg = "success";
LoginModelEntity modelEntity2 = LoginModelEntity();
modelEntity2.code = "400";
modelEntity2.ts = "22222";
modelEntity2.msg = "错误";
String jsonString1 = convert.jsonEncode(modelEntity1);
String jsonString2 = convert.jsonEncode(modelEntity2);
Map<String,dynamic> params = Map();
params["model1"] = jsonString1;
params['model2'] = jsonString2;
Routes.navigateTo(context, Routes.last,params: params).then((value) => print("value is $value"));
},
child: Text("setting"),
),
),
);
}
}
LastPage 代码如下
import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app_fluro/login_model_entity.dart';
import 'Routes.dart';
class LastPage extends StatefulWidget {
LoginModelEntity model1;
LoginModelEntity model2;
LastPage({this.model1,this.model2});
@override
_LastPageState createState() => _LastPageState();
}
class _LastPageState extends State<LastPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("${widget.model1.msg} + ${widget.model1.code} + ${widget.model1.ts}"),
),
body: Center(
child: RaisedButton(
onPressed: (){
// Navigator.of(context)..pop(100)
// ..pop(200)
// ..pop();
// Navigator.of(context).popUntil(ModalRoute.withName(Routes.webView));//这个会报错
// Navigator.of(context).popUntil(ModalRoute.withName(Routes.setting));
// Navigator.of(context).popUntil(ModalRoute.withName(Routes.third));
Navigator.of(context).popUntil(ModalRoute.withName(Routes.root));
},
child: Text("${widget.model2.msg} + ${widget.model2.code} + ${widget.model2.ts}"),
),
),
);
}
}
对应该的还有model代码,如下
class LoginModelEntity {
String msg;
String code;
String ts;
LoginModelEntity({this.msg, this.code, this.ts});
LoginModelEntity.fromJson(Map<String, dynamic> json) {
msg = json['msg'];
code = json['code'];
ts = json['ts'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['msg'] = this.msg;
data['code'] = this.code;
data['ts'] = this.ts;
return data;
}
}
现在可以开心的测试了,效果如下:
gif5新文件.gif
结尾
需要源码的话，请留言吧,觉得有点帮助的,请点个赞吧~~
网友评论