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

29 | 混合开发,该用何种方案管理导航栈?

Android端实现
iOS端实现
注册openNativePage和closeFlutterPage方法
从Flutter页面回退到旧的原生页面
从Flutter页面打开新的原生页面
方法通道
两种场景
Android端实现
iOS端实现
确保页面过渡动画一致
增加页面id的功能
闲鱼方案
今日头条方案
从Flutter页面跳转至原生页面
从原生页面跳转至Flutter页面
统一管理
页面导航栈视图中存在
原生页面与Flutter页面相互掺杂
思考题
解决方案
避免多个Flutter容器实例
Flutter页面切换到原生页面
原生页面切换到Flutter页面
处理跨渲染引擎的页面跳转
原生页面与Flutter页面跳转交互
混合导航栈
在iOS工程中通过FlutterViewController
在Android工程中通过FlutterView
在Android平台使用aar、iOS平台使用pod进行依赖管理
以组件化的方式管理不同平台的Flutter构建产物
改造Flutter工程为原生工程的组件依赖
总结
页面导航栈管理
实现混合开发方式
Flutter引入到原生工程
混合开发
混合开发管理导航栈

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

你好,我是陈航。
为了把 Flutter 引入到原生工程,我们需要把 Flutter 工程改造为原生工程的一个组件依赖,并以组件化的方式管理不同平台的 Flutter 构建产物,即 Android 平台使用 aar、iOS 平台使用 pod 进行依赖管理。这样,我们就可以在 Android 工程中通过 FlutterView,iOS 工程中通过 FlutterViewController,为 Flutter 搭建应用入口,实现 Flutter 与原生的混合开发方式。
我在第 26 篇文章中提到,FlutterView 与 FlutterViewController 是初始化 Flutter 的地方,也是应用的入口。可以看到,以混合开发方式接入 Flutter,与开发一个纯 Flutter 应用在运行机制上并无任何区别,只需要原生工程为它提供一个画板容器(Android 为 FlutterView,iOS 为 FlutterViewController),Flutter 就可以自己管理页面导航栈,从而实现多个复杂页面的渲染和切换。
关于纯 Flutter 应用的页面路由与导航,我已经在第 21 篇文章中与你介绍过了。今天这篇文章,我会为你讲述在混合开发中,应该如何管理混合导航栈。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

混合开发中的导航栈管理是一个重要的技术挑战。本文介绍了在混合开发中如何处理原生页面和Flutter页面之间的页面跳转,并提供了具体的实现方法。针对从原生页面跳转至Flutter页面,作者提供了在iOS和Android平台上的具体实现代码。而从Flutter页面跳转至原生页面则需要通过方法通道实现。文章还指出了混合开发中可能出现的多个Flutter容器实例的问题,并探讨了业界对于解决这一问题的两种方案。然而,这两种方案都存在一定的不足之处。最后,文章提出了两个思考题,分别是如何在Flutter页面打开任意的原生页面以及如何确保原生页面和Flutter页面之间的过渡动画在应用整体效果上是一致的。通过本文,读者可以快速了解混合开发中导航栈管理的挑战和解决方案,以及对于混合开发技术的思考和展望。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《Flutter 核心技术与实战》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(19)

  • 最新
  • 精选
  • Geek_joestar
    原生页面打开Flutter页面时会黑屏一两秒,然后出现Flutter页面内容,这个体验很不好

    作者回复: Debug环境吧?Release环境加载会快很多,另外可以考虑提前把引擎初始化

    2019-09-10
    6
    6
  • 阿水
    老师我想请教一下,原生界面和flutter界面互相跳转的时候出现屏幕一闪的现象,有解决方案吗

    作者回复: 把flutter容器做成单例,提前初始化好

    2019-10-31
    3
    4
  • 菜头
    请教一下 如何能够确保这两种页面过渡动画在应用整体的效果是一致的?

    作者回复: 保证整体效果一致,有两种方案: 一是,分别定制原生工程(主要是Android)的切换动画,及Flutter的切换动画; 二是,使用类似闲鱼的共享FlutterView的机制,将页面切换统一交由原生处理,FlutterView只负责刷新界面。

    2019-11-20
    2
    3
  • Carlo
    从 Flutter 页面跳转至原生页面 或者 从原生页面跳转至Flutter页面 如何传参呢?

    作者回复: OpenNativePage,closeFlutterPage这两个方法可以增加参数

    2019-10-27
    3
  • 陆大胖
    Push FlutterViewController的方案不可取。起码现在stable分支上没有解决内存泄漏的问题。另外需知道每个FlutterViewController的创建都应了整个Flutter App的启动(xcode上暂停应用,会看到多了一套完整的Flutter线程,UI、io那些),无论你是否setInitialRoute,都是从Flutter代码的main函数开始运行,感觉上就是在你的应用内,启动了2个同样的Flutter App/模块, 这还意味着2个FlutterViewController之间不做特殊处理的情况下不共享任何信息,以上,大多数情况下都会带来些水土不服。另外作者在回复中提到的“或者纯FlutterApp全部都是FlutterViewController,不释放其实也没什么问题”,这里的“全部都是FlutterViewController”可能我理解有偏差,先打个问号。

    作者回复: flutteView确实有内存泄漏问题,不过问题不大,技术上可以通过全局共享VC解决,实际落地尽量让业务闭环在Flutter内部即可。 对于纯flutter应用,整个页面都是flutter渲染的,不涉及跨技术栈的渲染切换,自然也就不需要重建和释放了。

    2019-09-18
    2
  • zzz
    看文中提到的头条的文章,FlutterView -> Engine —> vm中的isolate,然后使用isolate共享,FlutterView -> Engine还是一一对应的就解决了内存的问题,那请问下在iOS中,初始化FlutterViewController的方法中initWithEngine中传入同一个engine,是否是多个FlutterViewController对应同一个engine然后对应一个isolate呢?

    作者回复: 是,但是你需要自己去清理和恢复engine的运行上下文,可能会出现为定义的异常或者bug

    2019-10-30
  • N1eR
    跳转到的原生页面继承AppCompatActivity会崩溃 继承Activity就没事 这是为啥

    作者回复: 一般是直接用acrivity,否则你需要单独隐藏工具栏。crash倒从来没遇到过,你可以查一下具体的报错信息

    2019-10-30
  • 舒大飞
    如果混合开发中,多个不连续的flutter页面那个就会创建多个Flutter引擎吗

    作者回复: 如果不做特殊定制(头条或闲鱼的方案),是的

    2019-10-11
  • 辉哥
    老师,请教一下,对于android来说,Flutter实例是不是对应的FlutterView对象?同时开启多个Flutter实例会占用过多的内存,那关闭当前Flutter容器所在的Activity是否能回收Flutter实例所占的内存?

    作者回复: 对;理论上是,但考虑到Flutter引擎有内存泄漏问题,如果Flutter页面需要反复打开,不建议采用这种方式回收内存,可以考虑将Flutter容器做成一个单例。

    2019-09-26
  • Tony
    我想问下老师,用什么画图软件画的图

    作者回复: draw.io

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