flutter导航框架fluro https://github.com/lukepighetti/fluro
前一章节介绍了Navigator的导航跳转,今天我们来看看fluro框架提供的跳转。flutter提供的Navigator和fluro这两个到底哪个好用,个人推荐使用fluro。废话不多说,一个字干。
1、在pubspec.yaml中添加引用
fluro: ^1.7.8
执行一下
flutter pub get
2、基础配置
class BaseRouter{
static FluroRouter _mFluroRouter;
static FluroRouter getRouter(){
return _mFluroRouter;
}
static void setRouter(FluroRouter router){
_mFluroRouter = router;
}
static List _mListRouter = [];
static void registerConfigureRoutes(FluroRouter router){
if(router == null){
throw Exception("fluroRouter is null, please init router");
}
router.notFoundHandler = Handler(
handlerFunc:(BuildContext context, Map> parameters){
print("页面没有注册,找不到该页面 ");
return RouteNotFound();
}
);
_mListRouter.clear();
//添加模块路由
_mListRouter.add(LoginRouter());
_mListRouter.forEach((element) {
element.initFluroRouter(router);
});
}
}
3、定义模块路由注册
abstract class IRouter {
void initFluroRouter(FluroRouter fluroRouter);
}
4、模块路由配置
class LoginRouter extends IRouter{
static String loginPage = "/login/loginPage";
static String loginUserInfoPage = "/login/loginUserInfoPage";
@override
void initFluroRouter(FluroRouter fluroRouter) {
// TODO: implement initFluroRouter
fluroRouter.define(loginPage, handler: Handler(handlerFunc: (_,params){
String userName = params[LoginPage.bundleKeyUserName]?.first;
String times = params[LoginPage.bundleKeyTime]?.first;
return LoginPage(userName,times);
}));
fluroRouter.define(loginUserInfoPage, handler: Handler(handlerFunc: (context,params){
final args = context.settings.arguments as UserInfo;
return LoginInfoPage(args);
}));
}
}
5、统一跳转配置
class NavigatorUtils {
static void push(BuildContext context, String path,
{bool replace = false, bool clearStack = false}) {
FocusScope.of(context).unfocus();
BaseRouter.getRouter().navigateTo(context, path,
replace: replace,
clearStack: clearStack,
transition: TransitionType.native);
}
static void pushResult(
BuildContext context, String path, Function(Object) function,
{bool replace = false, bool clearStack = false}) {
FocusScope.of(context).unfocus();
BaseRouter.getRouter()
.navigateTo(context, path,
replace: replace,
clearStack: clearStack,
transition: TransitionType.native)
.then((value) {
if (value == null) {
return;
}
function(value);
}).catchError((onError) {
print("$onError");
});
}
static void pushArgumentResult(BuildContext context, String path,
Object argument, Function(Object) function,
{bool replace = false, bool clearStack = false}) {
BaseRouter.getRouter()
.navigateTo(context, path,
routeSettings: RouteSettings(arguments: argument), replace: replace, clearStack: clearStack)
.then((value) {
if (value == null) {
return;
}
function(value);
}).catchError((onError) {
print("$onError");
});
}
static void pushArgument(
BuildContext context, String path, Object argument,
{bool replace = false, bool clearStack = false}) {
BaseRouter.getRouter().navigateTo(context, path,
routeSettings: RouteSettings(arguments: argument), replace: replace, clearStack: clearStack);
}
static void goBack(BuildContext context) {
FocusScope.of(context).unfocus();
Navigator.pop(context);
}
static void goBackWithParams(BuildContext context, result) {
FocusScope.of(context).unfocus();
Navigator.pop(context, result);
}
static String changeToNavigatorPath(String registerPath,
{Map params}) {
if (params == null || params.isEmpty) {
return registerPath;
}
StringBuffer bufferStr = StringBuffer();
params.forEach((key, value) {
bufferStr
..write(key)
..write("=")
..write(Uri.encodeComponent(value))
..write("&");
});
String paramStr = bufferStr.toString();
paramStr = paramStr.substring(0, paramStr.length - 1);
print("传递的参数 $paramStr");
return "$registerPath?$paramStr";
}
}
路由跳转
NavigatorUtils.push(context, "/login/loginPage?userName=flutterName&email=123@qq.com");
//path的配置 /login/loginPage?userName=flutterName&email=123@qq.com
path就像http中get请求的url链接,"?"号前的是fluroRouter.define()中的routePath字段,后面的就是我们要传递的参数。
参数获取
fluroRouter.define("/login/loginPage", handler: Handler(handlerFunc: (_,params){
String userName = params["userName"]?.first;
String email = params["email"]?.first;
return LoginPage(userName,email);
}));
这样传递的参数只能是字符串格式,如果字符串中包含中文就需要使用Uri.encodeComponent进行转义
其他类型参数传递
fluroRouter.define(loginUserInfoPage, handler: Handler(handlerFunc: (context,params){
final args = context.settings.arguments as UserInfo;
return LoginInfoPage(args);
}));
UserInfo userInfo = UserInfo();
userInfo.email = "xiao@163.com";
userInfo.name = "小小";
NavigatorUtils.pushArgument(context, LoginRouter.loginUserInfoPage, userInfo);
static void pushArgument(
BuildContext context, String path, Object argument,
{bool replace = false, bool clearStack = false}) {
BaseRouter.getRouter().navigateTo(context, path,
routeSettings: RouteSettings(arguments: argument), replace: replace, clearStack: clearStack);
}
其他的类型参数直接在routeSettings中设置,其他的都是一样
Demo地址: https://github.com/yangyang10/fluroDemo/tree/main/router_by_fluro