Flutter核心技术与实战
陈航
美团点评高级技术专家
立即订阅
6150 人已学习
课程目录
已完结 47 讲
0/4登录后,你可以任选4讲全文学习。
课前必读 (3讲)
开篇词 | 为什么每一位大前端从业者都应该学习Flutter?
免费
01 | 预习篇 · 从0开始搭建Flutter工程环境
02 | 预习篇 · Dart语言概览
Flutter开发起步 (3讲)
03 | 深入理解跨平台方案的历史发展逻辑
04 | Flutter区别于其他方案的关键技术是什么?
05 | 从标准模板入手,体会Flutter代码是如何运行在原生系统上的
Dart语言基础 (3讲)
06 | 基础语法与类型变量:Dart是如何表示信息的?
07 | 函数、类与运算符:Dart是如何处理信息的?
08 | 综合案例:掌握Dart核心特性
Flutter基础 (13讲)
09 | Widget,构建Flutter界面的基石
10 | Widget中的State到底是什么?
11 | 提到生命周期,我们是在说什么?
12 | 经典控件(一):文本、图片和按钮在Flutter中怎么用?
13 | 经典控件(二):UITableView/ListView在Flutter中是什么?
14 | 经典布局:如何定义子控件在父容器中排版的位置?
15 | 组合与自绘,我该选用何种方式自定义Widget?
16 | 从夜间模式说起,如何定制不同风格的App主题?
17 | 依赖管理(一):图片、配置和字体在Flutter中怎么用?
18 | 依赖管理(二):第三方组件库在Flutter中要如何管理?
19 | 用户交互事件该如何响应?
20 | 关于跨组件传递数据,你只需要记住这三招
21 | 路由与导航,Flutter是这样实现页面切换的
Flutter进阶 (17讲)
22 | 如何构造炫酷的动画效果?
23 | 单线程模型怎么保证UI运行流畅?
24 | HTTP网络编程与JSON解析
25 | 本地存储与数据库的使用和优化
26 | 如何在Dart层兼容Android/iOS平台特定实现?(一)
27 | 如何在Dart层兼容Android/iOS平台特定实现?(二)
28 | 如何在原生应用中混编Flutter工程?
29 | 混合开发,该用何种方案管理导航栈?
30 | 为什么需要做状态管理,怎么做?
31 | 如何实现原生推送能力?
32 | 适配国际化,除了多语言我们还需要注意什么?
33 | 如何适配不同分辨率的手机屏幕?
34 | 如何理解Flutter的编译模式?
35 | Hot Reload是怎么做到的?
36 | 如何通过工具链优化开发调试效率?
37 | 如何检测并优化Flutter App的整体性能表现?
38 | 如何通过自动化测试提高交付质量?
Flutter综合应用 (6讲)
39 | 线上出现问题,该如何做好异常捕获与信息采集?
40 | 衡量Flutter App线上质量,我们需要关注这三个指标
41 | 组件化和平台化,该如何组织合理稳定的Flutter工程结构?
42 | 如何构建高效的Flutter App打包发布环境?
43 | 如何构建自己的Flutter混合开发框架(一)?
44 | 如何构建自己的Flutter混合开发框架(二)?
结束语 (1讲)
结束语 | 勿畏难,勿轻略
特别放送 (1讲)
特别放送 | 温故而知新,与你说说专栏的那些思考题
Flutter核心技术与实战
登录|注册

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

陈航 2019-09-03
你好,我是陈航。
为了把 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/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《Flutter核心技术与实战》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(12)

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

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

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

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

    2019-10-27
    1
  • 陆大胖
    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
    1
  • 菜头
    请教一下
    如何能够确保这两种页面过渡动画在应用整体的效果是一致的?

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

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

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

    2019-10-31
  • 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
  • 矮个子先生😝
    老师,不知您是否有出现,push FlutterViewController之后,然后closeFlutterPage,但是内存依然居高不下.

    作者回复: FlutterEngine内部实现存在循环引用的情况,所以会有内存泄漏的问题。不过一般的混合应用只会创建一个FlutterViewController,或者纯FlutterApp全部都是FlutterViewController,不释放其实也没什么问题。如果真的需要关闭flutter容器,可以把FlutterViewController缓存起来(作为单例使用)。

    2019-09-04
  • 许童童
    跟着老师一起精进,感谢老师的分享。
    2019-09-03
收起评论
12
返回
顶部