Flutter 核心技术与实战
陈航
前美团点评高级技术专家
42432 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 48 讲
Flutter 核心技术与实战
15
15
1.0x
00:00/00:00
登录|注册

21 | 路由与导航,Flutter是这样实现页面切换的

计算页面实现
基本路由页面参数传递
路由参数控制
基本路由 vs. 命名路由
返回参数
传递参数
错误路由处理
页面切换方式
页面注册
页面返回方式
页面切换方式
思考题
总结
页面参数
命名路由
基本路由
路由与导航,Flutter页面切换实现

该思维导图由 AI 生成,仅供参考

你好,我是陈航。
在上一篇文章中,我带你一起学习了如何在 Flutter 中实现跨组件数据传递。其中,InheritedWidget 适用于子 Widget 跨层共享父 Widget 数据的场景,如果子 Widget 还需要修改父 Widget 数据,则需要和 State 一起配套使用。而 Notification,则适用于父 Widget 监听子 Widget 事件的场景。对于没有父子关系的通信双方,我们还可以使用 EventBus 实现基于订阅 / 发布模式的机制实现数据交互。
如果说 UI 框架的视图元素的基本单位是组件,那应用程序的基本单位就是页面了。对于拥有多个页面的应用程序而言,如何从一个页面平滑地过渡到另一个页面,我们需要有一个统一的机制来管理页面之间的跳转,通常被称为路由管理或导航管理
我们首先需要知道目标页面对象,在完成目标页面初始化后,用框架提供的方式打开它。比如,在 Android/iOS 中我们通常会初始化一个 Intent 或 ViewController,通过 startActivity 或 pushViewController 来打开一个新的页面;而在 React 中,我们使用 navigation 来管理所有页面,只要知道页面的名称,就可以立即导航到这个页面。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
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-19
    44
  • 和小胖
    在敲代码时候的有两点需要注意的地方。 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-24
    2
    15
  • 高超
    问:对于基本路由,如何传递页面参数? 答:1. 使用构造函数传参 2. MaterialPageRoute 加入参数 setting: RouteSettings 。第二个页面获取逻辑和命令路由就一样了。

    作者回复: 赞

    2019-09-03
    6
  • 入魔的冬瓜
    自己手动push一个route的话,可以通过构造函数进行传参数。 使用命名路由的话,参数的读取通过ModalRoute.of(context).settings.arguments,这个操作要放在build里面操作。这种情况,有没有什么办法也是通过构造函数传参数,在build之前就可以拿到参数。(类似第三方fluro框架)

    作者回复: 命名路由没有提供这样的接口,如果想这样做的话,可以自己实现一套注册路由的注解,在编译期初始化页面的时候把参数传过去

    2019-10-18
    2
  • 把所有命名路由都定义在一起会很多,也不利于模块化,能否在模块中定义路由呢?另外,有没有子路由的概念呢?

    作者回复: 你可以试试用注解的方式结偶,在运行期统一收集注册

    2019-10-22
    1
  • 老师你好,showdialog也是进行了路由跳转,为什么会出现在当前界面上面,而普通的都是跳到另外一个新的界面

    作者回复: 底层element与render object渲染的样式不一样而已

    2019-10-21
    1
  • 巫山老妖
    第二道思考题: 传参: 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-07
    1
  • 严旭珺
    老师好,请问一下,如果是类似于Android中打开页面 A->B->A,标准的启动模式,栈中有2个A页面该怎么办呢?我试了试B页面Navigator.pushName(context,A),会黑屏

    作者回复: 有几个A都可以啊,因为每个A都是不同的实例。

    2019-10-05
    2
    1
  • 和小胖
    第二个问题:可以构造一个 list 传递过去,然后对 list 中数据的两个数字求和再把结果带回上个页面。 另外老师通过 arguments 是不是只能传递一个参数呀?

    作者回复: 只能传一个参数,如果需要多个参数,传Map或者List都可以

    2019-09-24
    1
  • YJ
    陈老师请问? 使用的是Navigator.push A->B->C->D, 如何 让D页面 pop 到 B 呢?

    作者回复: Navigator.popUntil(context,ModalRoute.withName('B'));

    2019-08-20
    3
收起评论
显示
设置
留言
24
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部