最近在學(xué)習(xí)flutter避咆，看到一個(gè)fluro的路由框架不錯(cuò)镶骗，但在網(wǎng)上搜了下 很少對fluro的教程文章滋饲，所以閑暇之余寫了此文章給需要的人懶厉碟，順便再自己鞏固下對此框架的運(yùn)用，語言組織能力不好 勿噴（后續(xù)會(huì)在詳細(xì)的對每個(gè)方法參數(shù)進(jìn)行講解）
Fluro
flutter的跳轉(zhuǎn)框架屠缭，開發(fā)者稱之為 “Flutter最亮箍鼓，最時(shí)髦，最酷的路由器呵曹】羁В”
官方地址 https://pub.dev/packages/fluro
入門
在 pubspec.yaml中加入下面代碼
dependencies:
fluro: "^1.5.1"
開始使用
首先我們定義一個(gè)全局的router對象，用于后續(xù)的全局調(diào)用
import 'package:fluro/fluro.dart';
class Application {
static Router router;
}
然后創(chuàng)建一個(gè)抽象類,用于后續(xù)的各模塊router實(shí)現(xiàn)此類進(jìn)行路由注冊初始化
import 'package:fluro/fluro.dart';
abstract class IRouterProvider{
void initRouter(Router router);
}
示例
這是一個(gè)登錄模塊的路由管理示例逢并，我們要實(shí)現(xiàn)剛才創(chuàng)建的 IRouterProvider 抽象類之剧，實(shí)現(xiàn)其 initRouter() 方法進(jìn)行每個(gè)頁面的路由注冊
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()));
}
}
接下來我們需要?jiǎng)?chuàng)建一個(gè)總的router管理類
router.define(home, handler: Handler(
handlerFunc: (BuildContext context, Map<String, List<String>> params) => Home()));
此方法中第一個(gè)參數(shù)為注冊地址，第二個(gè)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) {
/// 指定路由跳轉(zhuǎn)錯(cuò)誤返回頁
router.notFoundHandler = Handler(
handlerFunc: (BuildContext context, Map<String, List<String>> params) {
debugPrint("未找到目標(biāo)頁");
return WidgetNotFound();
});
//主界面可以在此類中進(jìn)行注冊（可定義傳參）
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);
}));
//每次初始化前 先清除集合 以免重復(fù)添加
_listRouter.clear();
/// 各自路由由各自模塊管理砍聊，統(tǒng)一在此添加初始化
_listRouter.add(LoginRouter());
/// 初始化路由 循環(huán)遍歷取出每個(gè)子router進(jìn)行初始化操作
_listRouter.forEach((routerProvider){
routerProvider.initRouter(router);
});
}
}
接下來封裝跳轉(zhuǎn)工具類
import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'application.dart';
import 'routers.dart';
/// fluro的路由跳轉(zhuǎn)工具類
class NavigatorUtils {
//不需要頁面返回值的跳轉(zhuǎn)
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);
}
//需要頁面返回值的跳轉(zhuǎn)
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);
}
/// 帶參數(shù)返回
static void goBackWithParams(BuildContext context, result) {
FocusScope.of(context).requestFocus(new FocusNode());
Navigator.pop(context, result);
}
}
使用
首先我們需要在main.dart中進(jìn)行初始化
class MyApp extends StatelessWidget {
MyApp() {
//創(chuàng)建一個(gè)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,
),
);
}
}
無返回值跳轉(zhuǎn) 第二個(gè)參數(shù)是目標(biāo)地址背稼，第三個(gè)是是否關(guān)閉當(dāng)前界面 （ 非必傳 默認(rèn)為false true的話是關(guān)閉 從內(nèi)存中釋放）
需要傳參時(shí) 第二個(gè)參數(shù)用以下方式傳（此為固定的格式）
'${Routes.webViewPage}?param1=${Uri.encodeComponent(content1)}¶m2=${Uri.encodeComponent(content2)}'
問號(hào)前的是目標(biāo)地址 ${Routes.webViewPage}
問號(hào)后的是需要傳的參數(shù)param=${Uri.encodeComponent(content)}（fluro 不支持傳中文,需轉(zhuǎn)換）
param為參數(shù)名稱，content為需要傳遞的參數(shù)
//不需要穿參數(shù)的
_goLogin(){
NavigatorUtils.push(context, LoginRouter.loginPage, replace: true);
}
//需要傳參數(shù)的
_goLogin(){
NavigatorUtils.push(context,
'${Routes.webViewPage}?param1=${Uri.encodeComponent(content1)}¶m2=${Uri.encodeComponent(content2)}'
, replace: true);
}
有返回值跳轉(zhuǎn)
NavigatorUtils.pushResult(context, AccountRouter.citySelectPage, (result){
setState(() {
//result是返回的結(jié)果
TestModel model = result;
_name = model.name;
});
});
返回上一級
NavigatorUtils.goBack(context);
帶參數(shù)返回上一級(result是返回結(jié)果)
NavigatorUtils.goBackWithParams(context, result);
參考自https://github.com/simplezhli/flutter_deer
