21 | 路由与导航,Flutter是这样实现页面切换的
该思维导图由 AI 生成,仅供参考
- 深入了解
- 翻译
- 解释
- 总结
Flutter路由与导航管理是应用程序中的关键部分。本文介绍了Flutter中的基本路由和命名路由两种管理方式。基本路由类似于Android/iOS中打开新页面的方式,而命名路由则简化了路由管理,通过页面名称直接打开页面。文章还介绍了页面参数的传递和获取,以及页面关闭时传递参数的机制。通过示例代码演示了如何使用基本路由和命名路由,以及如何处理未知路由和页面参数。总的来说,本文详细介绍了Flutter中路由与导航的实现方式,为读者提供了全面的了解和使用指南。 在Flutter中,基本路由和命名路由是管理页面间跳转的两种方式。基本路由需要手动创建页面实例,通过Navigator.push完成页面跳转;而命名路由需要提前注册页面标识符和页面创建方法,通过Navigator.pushNamed传入标识符实现页面跳转。对于命名路由,需要注册UnknownRoute来响应错误路由标识符。Flutter还提供了页面打开与页面关闭的参数机制,可以在页面创建和目标页面关闭时,取出相应的参数。 Flutter综合了Android、iOS和React的特点,简洁而不失强大。在中大型应用中,通常会使用命名路由来管理页面间的切换。命名路由建立了字符串标识符与各个页面之间的映射关系,使得各个页面之间完全解耦,为后期模块化打好基础。 读者可以通过下载工程到本地,多运行几次,加深对基本路由、命名路由以及路由参数具体用法的印象。最后,作者留下了两个思考题,分别是关于基本路由如何传递页面参数以及实现一个计算页面的作业。欢迎读者在评论区分享观点,作者将在下一篇文章中等待读者的回应。
《Flutter 核心技术与实战》,新⼈⾸单¥59
全部留言(24)
- 最新
- 精选
- YJ使用的是Navigator.push A->B->C->D, 请问如何 D页面 pop 到 B 呢?
作者回复: Navigator.popUntil(context,ModalRoute.withName('B'));
2019-08-1944 - 和小胖在敲代码时候的有两点需要注意的地方。 1、在传入 runApp 里面的 widget 里面做路由跳转的时候所使用的的 BuildContext 不能是 App 的,必须得是 widget 的,否则会报 Navigator operation requested with a context that does not include a Navigator 这样子的错。 2、使用命名路由或者注册表的方式,最好是在传入 runApp 里面的 widget 的MaterialApp 里面做 routes 的配置,为的是 APP 一启动的时候就注册上,否则可能会存在要使用命名,可是还没注册的情况,就会报 Could not find a generator for route RouteSettings("second_page", null) in the _WidgetsAppState 这样的错误。
作者回复: 赞👍
2019-09-24215 - 高超问:对于基本路由,如何传递页面参数? 答:1. 使用构造函数传参 2. MaterialPageRoute 加入参数 setting: RouteSettings 。第二个页面获取逻辑和命令路由就一样了。
作者回复: 赞
2019-09-036 - 入魔的冬瓜自己手动push一个route的话,可以通过构造函数进行传参数。 使用命名路由的话,参数的读取通过ModalRoute.of(context).settings.arguments,这个操作要放在build里面操作。这种情况,有没有什么办法也是通过构造函数传参数,在build之前就可以拿到参数。(类似第三方fluro框架)
作者回复: 命名路由没有提供这样的接口,如果想这样做的话,可以自己实现一套注册路由的注解,在编译期初始化页面的时候把参数传过去
2019-10-182 - 巫把所有命名路由都定义在一起会很多,也不利于模块化,能否在模块中定义路由呢?另外,有没有子路由的概念呢?
作者回复: 你可以试试用注解的方式结偶,在运行期统一收集注册
2019-10-221 - 肖老师你好,showdialog也是进行了路由跳转,为什么会出现在当前界面上面,而普通的都是跳到另外一个新的界面
作者回复: 底层element与render object渲染的样式不一样而已
2019-10-211 - 巫山老妖第二道思考题: 传参: RaisedButton( child: Text('命名路由(参数&回调)'), onPressed: () => Navigator.pushNamed(context, "third_page", arguments: [1, 2]) .then((msg) { setState(() { _msg = msg; }); }) 计算并返回: class ThirdPage extends StatelessWidget { @override Widget build(BuildContext context) { var args = ModalRoute.of(context).settings.arguments as List<int>; int sum = args[0] + args[1]; print(sum); return Scaffold( appBar: AppBar( title: Text('Third Screen'), ), body: Column( children: <Widget>[ Text('Message from first screen: $args'), RaisedButton( child: Text('back'), onPressed: ()=> Navigator.pop(context, "${sum}"), ) ], ), ); } }
作者回复: 赞👍
2019-10-071 - 严旭珺老师好,请问一下,如果是类似于Android中打开页面 A->B->A,标准的启动模式,栈中有2个A页面该怎么办呢?我试了试B页面Navigator.pushName(context,A),会黑屏
作者回复: 有几个A都可以啊,因为每个A都是不同的实例。
2019-10-0521 - 和小胖第二个问题:可以构造一个 list 传递过去,然后对 list 中数据的两个数字求和再把结果带回上个页面。 另外老师通过 arguments 是不是只能传递一个参数呀?
作者回复: 只能传一个参数,如果需要多个参数,传Map或者List都可以
2019-09-241 - YJ陈老师请问? 使用的是Navigator.push A->B->C->D, 如何 让D页面 pop 到 B 呢?
作者回复: Navigator.popUntil(context,ModalRoute.withName('B'));
2019-08-203