最近在学习flutter，看到一个fluro的路由框架不错，但在网上搜了下 很少对fluro的教程文章，所以闲暇之余写了此文章给需要的人懒，顺便再自己巩固下对此框架的运用，语言组织能力不好 勿喷（后续会在详细的对每个方法参数进行讲解）
Fluro
flutter的跳转框架，开发者称之为 “Flutter最亮，最时髦，最酷的路由器。”
官方地址 https://pub.dev/packages/fluro
入门
在 pubspec.yaml中加入下面代码
dependencies:
fluro: "^1.5.1"
开始使用
首先我们定义一个全局的router对象，用于后续的全局调用
import 'package:fluro/fluro.dart';
class Application {
static Router router;
}
然后创建一个抽象类,用于后续的各模块router实现此类进行路由注册初始化
import 'package:fluro/fluro.dart';
abstract class IRouterProvider{
void initRouter(Router router);
}
示例
这是一个登录模块的路由管理示例，我们要实现刚才创建的 IRouterProvider 抽象类，实现其 initRouter() 方法进行每个页面的路由注册
import 'package:fluro/fluro.dart';
import 'package:flutter_deer/routers/router_init.dart';
import 'login_page.dart';
import 'register_page.dart';
class LoginRouter implements IRouterProvider{
static String loginPage = "/login";
static String registerPage = "/login/register";
@override
void initRouter(Router router) {
router.define(loginPage, handler: Handler(handlerFunc: (_, params) => Login()));
router.define(registerPage, handler: Handler(handlerFunc: (_, params) => Register()));
}
}
接下来我们需要创建一个总的router管理类
router.define(home, handler: Handler(
handlerFunc: (BuildContext context, Map<String, List<String>> params) => Home()));
此方法中第一个参数为注册地址，第二个handler用于界面的路由注册
import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'package:flutter_deer/home/404.dart';
import 'package:flutter_deer/login/login_router.dart';
import 'package:flutter_deer/routers/router_init.dart';
import 'package:flutter_deer/home/home_page.dart';
import 'package:flutter_deer/home/webview_page.dart';
class Routes {
static String home = "/home";
static String webViewPage = "/webview";
//子router管理集合
static List<IRouterProvider> _listRouter = [];
static void configureRoutes(Router router) {
/// 指定路由跳转错误返回页
router.notFoundHandler = Handler(
handlerFunc: (BuildContext context, Map<String, List<String>> params) {
debugPrint("未找到目标页");
return WidgetNotFound();
});
//主界面可以在此类中进行注册（可定义传参）
router.define(home, handler: Handler(
handlerFunc: (BuildContext context, Map<String, List<String>> params) => Home()));
//一些共用的界面也可以在此处注册
router.define(webViewPage, handler: Handler(handlerFunc: (_, params){
String title = params['title']?.first;
String url = params['url']?.first;
return WebViewPage(title: title, url: url);
}));
//每次初始化前 先清除集合 以免重复添加
_listRouter.clear();
/// 各自路由由各自模块管理，统一在此添加初始化
_listRouter.add(LoginRouter());
/// 初始化路由 循环遍历取出每个子router进行初始化操作
_listRouter.forEach((routerProvider){
routerProvider.initRouter(router);
});
}
}
接下来封装跳转工具类
import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'application.dart';
import 'routers.dart';
/// fluro的路由跳转工具类
class NavigatorUtils {
//不需要页面返回值的跳转
static push(BuildContext context, String path,
{bool replace = false, bool clearStack = false}) {
FocusScope.of(context).requestFocus(new FocusNode());
Application.router.navigateTo(context, path, replace: replace, clearStack: clearStack, transition: TransitionType.native);
}
//需要页面返回值的跳转
static pushResult(BuildContext context, String path, Function(Object) function,
{bool replace = false, bool clearStack = false}) {
FocusScope.of(context).requestFocus(new FocusNode());
Application.router.navigateTo(context, path, replace: replace, clearStack: clearStack, transition: TransitionType.native).then((result){
// 页面返回result为null
if (result == null){
return;
}
function(result);
}).catchError((error) {
print("$error");
});
}
/// 返回
static void goBack(BuildContext context) {
FocusScope.of(context).requestFocus(new FocusNode());
Navigator.pop(context);
}
/// 带参数返回
static void goBackWithParams(BuildContext context, result) {
FocusScope.of(context).requestFocus(new FocusNode());
Navigator.pop(context, result);
}
}
使用
首先我们需要在main.dart中进行初始化
class MyApp extends StatelessWidget {
MyApp() {
//创建一个Router对象
final router = Router();
//配置Routes注册管理
Routes.configureRoutes(router);
//将生成的router给全局化
Application.router = router;
}
@override
Widget build(BuildContext context) {
return OKToast(
child: MaterialApp(
title: 'fluro',
theme: ThemeData(
primaryColor: Colours.app_main,
),
home: HomePage(),
//生成路由
onGenerateRoute: Application.router.generator,
),
);
}
}
无返回值跳转 第二个参数是目标地址，第三个是是否关闭当前界面 （ 非必传 默认为false true的话是关闭 从内存中释放）
需要传参时 第二个参数用以下方式传（此为固定的格式）
'${Routes.webViewPage}?param1=${Uri.encodeComponent(content1)}¶m2=${Uri.encodeComponent(content2)}'
问号前的是目标地址 ${Routes.webViewPage}
问号后的是需要传的参数param=${Uri.encodeComponent(content)}（fluro 不支持传中文,需转换）
param为参数名称，content为需要传递的参数
//不需要穿参数的
_goLogin(){
NavigatorUtils.push(context, LoginRouter.loginPage, replace: true);
}
//需要传参数的
_goLogin(){
NavigatorUtils.push(context,
'${Routes.webViewPage}?param1=${Uri.encodeComponent(content1)}¶m2=${Uri.encodeComponent(content2)}'
, replace: true);
}
有返回值跳转
NavigatorUtils.pushResult(context, AccountRouter.citySelectPage, (result){
setState(() {
//result是返回的结果
TestModel model = result;
_name = model.name;
});
});
返回上一级
NavigatorUtils.goBack(context);
带参数返回上一级(result是返回结果)
NavigatorUtils.goBackWithParams(context, result);
参考自https://github.com/simplezhli/flutter_deer
