Flutter - 路由管理 - 02 - Fluro
/// replace：true 就是将 splash 页面给移除掉了，这点后退键的时候就不会再出现 Splash 页面 Application.router.navigateTo(context, Routes.home, replace: true);}
5. home_page.dart
class HomePage extends StatefulWidget {@override_HomePageState createState() => _HomePageState();}
class _HomePageState extends State<HomePage> {@overrideWidget build(BuildContext context) {String name = "来自第一个界面测试一下";int age = 14;double score = 6.4;bool sex = true;Person person = new Person(name: 'Zeking', age: 18, sex: true);
return Scaffold(body: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Center(child: Text('这是主页')),RaisedButton(child: Text('传递参数 string ,int，double，bool ，自定义类型'),onPressed: () {NavigatorUtil.goDemoParamsPage(context, name, age, score, sex, person);},),RaisedButton(child: Text('传递参数,接受返回值'),onPressed: () {NavigatorUtil.goReturnParamsPage(context).then((result) {debugPrint('{result.runtimeType}');String message ;/// 如果是 自定义的 Person 类if (result.runtimeType == Person) {message = result.toJson().toString();debugPrint('{result.toJson().toString()}');} else {message = 'result');}showResultDialog(context, message);});},),RaisedButton(child: Text('框架 自带 转场动画 演示'),onPressed: () {NavigatorUtil.gotransitionDemoPage(context,/// 这边进行了 String 编码 FluroConvertUtils.fluroCnParamsEncode("框架 自带 转场动画 演示 \n\n\n ""这边只展示 inFromLeft ，剩下的自己去尝试下,\n\n\n ""架自带的有 native，nativeModal，inFromLeft，inFromRight，inFromBottom，fadeIn，custom"));},),RaisedButton(child: Text('框架 自定义 转场动画 演示'),onPressed: () {NavigatorUtil.gotransitionCustomDemoPage(context,FluroConvertUtils.fluroCnParamsEncode('框架 自定义 转场动画 演示'));},),RaisedButton(child: Text('修改源码，添加使用 Flutter 的 cupertino 转场动画'),onPressed: () {NavigatorUtil.gotransitionCupertinoDemoPage(context,FluroConvertUtils.fluroCnParamsEncode("修改源码，添加使用 Flutter 的 cupertino 转场动画"));},),],),);}
/// 显示一个 Dialgovoid showResultDialog(BuildContext context,String message){showDialog(context: context,builder: (context) {return new AlertDialog(title: new Text("Hey Hey!",style: new TextStyle(color: const Color(0xFF00D6F7),fontFamily: "Lazer84",fontSize: 22.0,),),content: new Text("$message"),actions: <Widget>[new Padding(padding: new EdgeInsets.only(bottom: 8.0, right: 8.0),child: new FlatButton(onPressed: () {Navigator.of(context).pop(true);},child: new Text("OK"),),),],);},);}}
4. 场景二：传参 String，int，double，bool，自定义类型
1. 效果图
2. 代码
1. 注意点（类型转换 fluro_convert_util.dart）
Fluro路由地址，只能传递String类型（并且不支持中文），所以需要对 中文，int,double,bool,自定义类型进行一个转换 , 写了一个 转换类 fluro_convert_util.dart
import 'dart:convert';
/// fluro 参数编码解码工具类 class FluroConvertUtils {/// fluro 传递中文参数前，先转换，fluro 不支持中文传递 static String fluroCnParamsEncode(String originalCn) {return jsonEncode(Utf8Encoder().convert(originalCn));}
/// fluro 传递后取出参数，解析 static String fluroCnParamsDecode(String encodeCn) {var list = List<int>();
///字符串解码 jsonDecode(encodeCn).forEach(list.add);String value = Utf8Decoder().convert(list);return value;}
/// string 转为 intstatic int string2int(String str) {return int.parse(str);}
/// string 转为 doublestatic double string2double(String str) {return double.parse(str);}
/// string 转为 boolstatic bool string2bool(String str) {if (str == 'true') {return true;} else {return false;}}
/// object 转为 string jsonstatic String object2string<T>(T t) {return fluroCnParamsEncode(jsonEncode(t));}
/// string json 转为 mapstatic Map<String, dynamic> string2map(String str) {return json.decode(fluroCnParamsDecode(str));}}
2. Person.dart 等下用到的自定义类型
class Person{String name;int age;bool sex;
Person({this.name, this.age,this.sex});
Person.fromJson(Map<String, dynamic> json) {name = json['name'];age = json['age'];sex = json['sex'];}
Map<String, dynamic> toJson() {final Map<String, dynamic> data = new Map<String, dynamic>();data['name'] = this.name;data['age'] = this.age;data['sex'] = this.sex;return data;}}
3. routes.dart
/// 配置路由地址 和 跳转类和参数 handlerstatic String demoParams = "/deme_params";
router.define(demoPara
ms, handler: demoParamHandler);
4. route_handlers.dart
/// 参数传递 int ，double，bool，自定义类型 var demoParamHandler = new Handler(handlerFunc: (BuildContext context, Map<String, List<Object>> params) {/// params["name"]?.first 相当于 params["name"][0] ，打个 debug 你就知道为什么了是个 listString name = params["name"]?.first;String age = params["age"]?.first;String sex = params["sex"]?.first;String score = params["score"]?.first;String personjson = params['personjson']?.first;/// 下面转换为真实想要的类型 return DemoParamsPage(name: name,age: FluroConvertUtils.string2int(age),score: FluroConvertUtils.string2double(score),sex: FluroConvertUtils.string2bool(sex),personJson: personjson,);});
5. NavigatorUtil.dart
/// 跳转到 传参 demo 页面 static void goDemoParamsPage(BuildContext context, String name, int age,double score, bool sex, Person person) {/// 对中文进行编码 String mName = FluroConvertUtils.fluroCnParamsEncode(name);/// 对自定义类型 转为 json stringString personJson = FluroConvertUtils.object2string(person);Application.router.navigateTo(context,Routes.demoParams +"?name=name&age=age&score=score&sex=sex&personjson=$personJson");}
6. home_page.dart 跳转按钮
String name = "来自第一个界面测试一下";int age = 14;double score = 6.4;bool sex = true;Person person = new Person(name: 'Zeking', age: 18, sex: true);
RaisedButton(child: Text('传递参数 string ,int，double，bool ，自定义类型'),onPressed: () {NavigatorUtil.goDemoParamsPage(context, name, age, score, sex, person);},),
7. demo_params_pag.dart
class DemoParamsPage extends StatefulWidget {final String name;final int age;final double score;final bool sex;final String personJson;
DemoParamsPage({this.name, this.age, this.score, this.sex, this.personJson});
@override_DemoParamsPageState createState() => _DemoParamsPageState();}
class _DemoParamsPageState extends State<DemoParamsPage> {@overrideWidget build(BuildContext context) {/// 对 中文 进行解码 String mName = FluroConvertUtils.fluroCnParamsDecode(widget.name);/// 对自定义类 进行解析 Person person =Person.fromJson(FluroConvertUtils.string2map(widget.personJson));print(person.name);print(person.age);print(person.sex);/// 下面的写法也可以 Map<String, dynamic> data = FluroConvertUtils.string2map(widget.personJson);print(data["name"]);print(data["age"]);print(data["sex"]);
return Scaffold(body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text('name：{widget.age}'),Text('score：{widget.sex}'),Text('Person:${person.toJson().toString()}'),RaisedButton(child: Text('返回'),onPressed: () {NavigatorUtil.goBack(context);},)],),),);}}
5. 场景三：接收返回值 String,int,double,自定义类型
1. 效果图
2. routes.dart
static String returnParams = "/return_params";
router.define(returnParams, handler: returnParamHandler);
3. route_handlers.dart
/// 关闭页面，返回参数 var returnParamHandler = new Handler(handlerFunc: (BuildContext context, Map<String, List<Object>> params) {return ReturnParamsPage();});
4. NavigatorUtil.dart
/// 跳转到 会返回参数的 页面 static Future goReturnParamsPage(BuildContext context) {return Application.router.navigateTo(context, Routes.returnParams);}
5. home_page.dart
RaisedButton(child: Text('传递参数,接受返回值'),onPressed: () {NavigatorUtil.goReturnParamsPage(context).then((result) {debugPrint('{result.runtimeType}');String message ;/// 如果是 自定义的 Person 类if (result.runtimeType == Person) {message = result.toJson().toString();debugPrint('{result.toJson().toString()}');} else {message = 'result');}showResultDialog(context, message);});},)
/// 显示一个 Dialgovoid showResultDialog(BuildContext context,String message){showDialog(context: context,builder: (context) {return new AlertDialog(title: new Text("Hey Hey!",style: new TextStyle(color: const Color(0xFF00D6F7),fontFamily: "Lazer84",fontSize: 22.0,),),content: new Text("$message"),actions: <Widget>[new Padding(padding: new EdgeInsets.only(bottom: 8.0, right: 8.0),child: new FlatButton(onPressed: () {Navigator.of(context).pop(true);},child: new Text("OK"),),),],);},);}
6. return_params_page.dart
class ReturnParamsPage extends StatefulWidget {@override_ReturnParamsPageState createState() => _ReturnParamsPageState();}
class _ReturnParamsPageState extends State<ReturnParamsPage> {@overrideWidget build(BuildContext context) {Person person = new Person(name: "returnName", age: 23, sex: false);return Scaffold(body: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Center(child: RaisedButton(child: Text('返回，并且返回 string'),onPressed: () {NavigatorUtil.goBackWithParams(context, "我是返回值哦");},),),RaisedButton(child: Text('返回，并且返回 int'),onPressed: () {NavigatorUtil.goBackWithParams(context, 12);},),RaisedButton(child: Text('返回，并且返回 double'),onPressed: () {NavigatorUtil.goBackWithParams(context, 3.1415926);},),RaisedButton(child: Text('返回，并且返回 bool'),onPressed: () {NavigatorUtil.goBackWithParams(context, true);},),RaisedButton(child: Text('返回，并且返回自定义类型'),onPressed: () {NavigatorUtil.goBackWithParams(context, person);},)],),);}}
6. 场景四：使用 框架 自带 的 转场动画
1. 效果图
2. routes.dart
static String transitionDemo = "/transitionDemo";
router.define(transitionDemo, handler: transitionDemoHandler);
3. route_handlers.dart
/// 转场动画 页面 var transitionDemoHandler = new Handler(handlerFunc: (BuildContext context, Map<String, List<Object>> params) {String title = params["title"]?.first;return TransitionDemoPage(title);});
4. NavigatorUtil.dart
/// 跳转到 转场动画 页面 ， 这边只展示 inFromLeft ，剩下的自己去尝试下，/// 框架自带的有 native，nativeModal，inFromLeft，inFromRight，inFromBottom，fadeIn，customstatic Future gotransitionDemoPage(BuildContext context, String title) {return Application.router.navigateTo(context, Routes.transitionDemo + "?title=$title",/// 指定了 转场动画 inFromLefttransition: TransitionType.inFromLeft);}
5. home_page.dart
RaisedButton(child: Text('框架 自带 转场动画 演示'),onPressed: () {NavigatorUtil.gotransitionDemoPage(context,/// 这边进行了 String 编码 FluroConvertUtils.fluroCnParamsEncode("框架 自带 转场动画 演示 \n\n\n ""这边只展示 inFromLeft ，剩下的自己去尝试下,\n\n\n ""架自带的有 native，nativeModal，inFromLeft，inFromRight，inFromBottom，fadeIn，custom"));},),
6. transition_demo_page.dart
场景五 ，场景六 ，用到一样的 transition_demo_page 后面就不展示了
class TransitionDemoPage extends StatefulWidget {final String title;
TransitionDemoPage(this.title);
@override_TransitionDemoPageState createState() => _TransitionDemoPageState();}
class _TransitionDemoPageState extends State<TransitionDemoPage> {@overrideWidget build(BuildContext context) {return Scaffold(body: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Center(child: Text(/// string 解码 FluroConvertUtils.fluroCnParamsDecode(widget.title),textAlign: TextAlign.center,)),RaisedButton(child: Text('返回'),onPressed: () {NavigatorUtil.goBack(context);},)],),);}}
7. 场景五：自定义转场动画
1. 效果图
2. routes.dart
static String transitionCustomDemo = "/transitionCustomDemo";
router.define(transitionCustomDemo, handler: transitionDemoHandler);
3. route_handlers.dart
/// 转场动画 页面 var transitionDemoHandler = new Handler(handlerFunc: (BuildContext context, Map<String, List<Object>> params) {String title = params["title"]?.first;return TransitionDemoPage(title);});
4. NavigatorUtil.dart
/// 自定义 转场动画 static Future gotransitionCustomDemoPage(BuildContext context, String title) {var transition = (BuildContext context, Animation<double> animation,Animation<double> secondaryAnimation, Widget child) {return new ScaleTransition(scale: animation,child: new RotationTransition(turns: animation,child: child,),);};return Application.router.navigateTo(context, Routes.transitionCustomDemo + "?title=$title",transition: TransitionType.custom, /// 指定是自定义动画 transitionBuilder: transition, /// 自定义的动画 transitionDuration: const Duration(milliseconds: 600)); /// 时间}
5. home_page.dart
RaisedButton(child: Text('框架 自定义 转场动画 演示'),onPressed: () {
还未添加个人签名 2021.10.31 加入
还未添加个人简介
评论