本文共 4220 字，大约阅读时间需要 14 分钟。
文章目录
添加依赖
#路由跳转 fluro: ^1.4.0
新建相关文件
-
新建application.dart文件,用于跳转时获取router
import 'package:fluro/fluro.dart';class Application{ static Router router;} 2. 新建route_handlers.dart文件,用于初始化跳转到各个页面的handle,并获取到上个页面传递过来的值,然后在初始化要跳转到的页面.
import 'package:fluro/fluro.dart';import 'package:flutter/material.dart';import 'package:flutter_my_demo/page/home.dart';import 'package:flutter_my_demo/page/webview.dart';var homeHandler = new Handler( handlerFunc: (BuildContext context, Map > params) { return new HomePage();});var webViewHandler = new Handler( handlerFunc: (BuildContext context, Map > params) { //获取路由跳转传来的参数 String url = params["url"].first; String title = params["title"].first; return new WebViewPage(url, title);});
3. 新建routes.dart文件,用于绑定路由地址和对应的handler.
import 'package:flutter/material.dart';import 'package:fluro/fluro.dart';import 'package:flutter_my_demo/route/route_handlers.dart';class Routes { static String root = "/"; static String home = "/home"; static String web = "/web"; static void configureRoutes(Router router){ router.notFoundHandler = new Handler( handlerFunc: (BuildContext context,Map > params){ print("route is not find !"); }); router.define(home, handler: homeHandler); router.define(web, handler: webViewHandler); }} 初始化配置
import 'package:fluro/fluro.dart';import 'package:flutter/material.dart';import 'package:flutter_my_demo/route/application.dart';import 'package:flutter_my_demo/route/routes.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { MyApp(){ //初始化路由 final router = new Router(); Routes.configureRoutes(router); Application.router = router; } @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MySplashPage(), //初始化路由 onGenerateRoute: Application.router.generator, ); }} 注意上边代码的两个初始化路由的步骤.
使用路由
1. 无参数跳转
Application.router.navigateTo(context, "/home",transition: TransitionType.fadeIn);
2. 有参数跳转
String route = '/web?url=${Uri.encodeComponent(itemUrl)}&title=${Uri.encodeComponent(itemTitle)}';Application.router.navigateTo(context, route,transition: TransitionType.fadeIn); 或者
Application.router.navigateTo(context, '${Routes.web}?title=${Uri.encodeComponent(itemTitle)}&url=${Uri.encodeComponent(itemUrl)}',transition: TransitionType.fadeIn); 注意:参数的值需要使用Uri.encodeComponent()方法调用一下,要不会报错.
注意：路由跳转都是进栈操作，原有页面没有销毁。如果想跳转时同时销毁页面，可用原生的路由跳转方法：
Navigator.of(context).pushAndRemoveUntil( MaterialPageRoute(builder: (context) => HomePage()), (route) => route == null);
路由执行startActivityForResult相似操作
在跳转后边加then操作，then未跳转的页面销毁之后，回调执行的方法。
Application.router.navigateTo(context, '${Routes.web}?title=${Uri.encodeComponent(itemTitle)}&url=${Uri .encodeComponent(itemUrl)}', transition: TransitionType.fadeIn).then((result){ if(result == "key"){ //执行func路由,func路由为弹出弹窗 Application.router.navigateTo(context, "/demo/func?message=$result"); } }); 在跳转到的web页面要销毁时，执行Navigator.pop(context, 'key');方法.然后就会调用上边代码中的then方法了。
func路由的handler如下：
var demoFunctionHandler = new Handler( type: HandlerType.function, handlerFunc: (BuildContext context, Map > params) { String message = params["message"]?.first; 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: [ 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"), ), ), ], ); }, ); });
转载地址：http://xonci.baihongyu.com/