flutter

Fluro路由管理

Posted by アライさん on 2019年10月22日 

1
fluro: ^1.5.0

缺陷：通过url的方式传递参数，不支持中文

如/page?params1=标题&params=颜色
需要进行编码转换
实测英文用这种转码方式也不会有问题 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import 'dart:convert';

/// fluro 参数编码解码 工具 类
class FluroConvertUtils {
  /// fluro 传递中文参数前，先转换，fluro 不支持中文传递
  static String fluroCnParamsEncode(String originalCn) {
    StringBuffer sb = StringBuffer();
    var encoded = Utf8Encoder().convert(originalCn);
    encoded.forEach((val) => sb.write('$val,'));
    return sb.toString().substring(0, sb.length - 1).toString();
  }

  /// fluro 传递后取出参数，解析
  static String fluroCnParamsDecode(String encodedCn) {
    var decoded = encodedCn.split('[').last.split(']').first.split(',');
    var list = <int>[];
    decoded.forEach((s) => list.add(int.parse(s.trim())));
    return Utf8Decoder().convert(list);
  }
}

一、route_handlers.dart定义所有要跳转的页面参数

route_handlers.dart 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import 'package:fluro/fluro.dart';
var homeHandler = new Handler(
    handlerFunc: (BuildContext context, Map<String, List<String>> params) {
  return HomePage();
});
var addRssUrlHandler = new Handler(
  handlerFunc: (BuildContext context,Map<String,List<String>> params){
    return AddRssUrlPage();
  }
);
var flareTestHandler = new Handler(
  handlerFunc: (BuildContext context,Map<String,List<String>> params){
    var title = FluroConvertUtils.fluroCnParamsDecode( params['title']?.first);
    var color = FluroConvertUtils.fluroCnParamsDecode( params['color']?.first);
    return FlareTestPage(title: title, color: color);
  }
);

二、routes.dart定义所有路由的地址

routes.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
class Routes{
//首页必须为/节点
  static String home = "/";
  static String addRss = "/addRss";
  static String flareTest = "/flareTest";

  static void configureRoutes(Router router){
    router.notFoundHandler = new Handler(
      handlerFunc: (BuildContext context,Map<String,List<String>> params){
        print('Route was not found !!!');
      }
    );

    router.define(home,handler:homeHandler);
    router.define(addRss,handler: addRssUrlHandler);
    router.define(flareTest,handler: flareTestHandler);
  }
}

三、定义全局的router

application.dart

1
2
3
class Application{
  static Router router;
}

四、main.dart中初始化router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
   MyApp({
    Key key,
  }) : super(key: key){
      final router = new Router();
      Routes.configureRoutes(router);
      Application.router = router;
  }
//MaterialApp中不需要指定home，自动查找router中的/节点
MaterialApp(
        title: 'Rss阅读器',
        theme: ThemeData(
          primarySwatch: Colors.cyan,
        ),
        onGenerateRoute: Application.router.generator,
        // home: HomePage(),
      )

五、页面跳转

1
2
3
4
Application.router.navigateTo(context, Routes.addRss);
              Application.router.navigateTo(context,
                  '${Routes.flareTest}?title=${FluroConvertUtils.fluroCnParamsEncode('标题')}&color=${FluroConvertUtils.fluroCnParamsEncode('颜色')}',
                  transition: TransitionType.fadeIn);



Tags
flutter