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核心技术与实战
登录|注册

04 | Flutter区别于其他方案的关键技术是什么?

陈航 2019-07-06
你好,我是陈航。
Flutter 是什么?它出现的动机是什么,解决了哪些痛点?相比其他跨平台技术,Flutter 的优势在哪里?……相信很多人在第一眼看到 Flutter 时,都会有类似的疑问。
别急,在今天的这篇文章中,我会与你介绍 Flutter 的历史背景和运行机制,并以界面渲染过程为例与你讲述其实现原理,让你对 Flutter 能够有一个全方位的认知和感受。在对 Flutter 有了全面了解后,这些疑问自然也就迎刃而解了。
接下来,我们就从 Flutter 出现的历史背景开始谈起吧。

Flutter 出现的历史背景

为不同的操作系统开发拥有相同功能的应用程序,开发人员只有两个选择:
使用原生开发语言(即 Java 和 Objective-C),针对不同平台分别进行开发。
使用跨平台解决方案,对不同平台进行统一开发。
原生开发方式的体验最好,但研发效率和研发成本相对较高;而跨平台开发方式研发虽然效率高,但为了抹平多端平台差异,各类解决方案暴露的组件和 API 较原生开发相比少很多,因此研发体验和产品功能并不完美。
所以,最成功的跨平台开发方案其实是依托于浏览器控件的 Web。浏览器保证了 99% 的概率下 Web 的需求都是可以实现的,不需要业务将就“技术”。不过,Web 最大的问题在于它的性能和体验与原生开发存在肉眼可感知的差异,因此并不适用于对体验要求较高的场景。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《Flutter核心技术与实战》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(39)

  • Mkl
    我有个疑问,
    “以下图为例:节点 1 在绘制完自身后,会再绘制子节点 2 和 6,最后绘制子节点 5、3 和 4。”
    这难道不是广度优先吗?深度优先不是先绘制1,然后2,3,5,4,6吗?

    作者回复: 确实是写错了,稍后我修改下。正确的绘制顺序是:节点1在绘制完自身后,会再绘制节点2,然后绘制它的子节点3、4和5,最后绘制节点6。

    2019-07-06
    28
  • 奇点
    建议弄一个项目,有理论有实践
    2019-07-08
    21
  • jjlanbupt
    总感觉讲的还不是特别透彻,可能受限于篇幅原因吧,比如渲染的过程顺序这些相对于其他平台或者原生来说,为了避免重复绘制,到底做了哪些优化?深度优先遍历等应该是普遍的思想,另外希望老师多放一些相关知识点的链接,比如涉及到GPU的放一些讲解原理的优质文章链接,期待老师后面的讲解

    作者回复: 后面会专门讲Widget的绘制流程的。
    Flutter's Rendering Pipeline可以参考:https://www.youtube.com/watch?v=UUfXWzp0-DU

    2019-07-06
    8
  • Smallfly
    跨端方案的发展本质上是在解决一个矛盾:

    企业需要多端研发(空间复杂度)以及开发周期长(时间复杂度)和用户体验的矛盾。

    而用户体验差往往表现在响应慢上(时间复杂度高)。
    2019-07-06
    7
  • 楚小奕
    『Skia 已然是 Android 官方的图像渲染引擎了,因此 Flutter Android SDK 无需内嵌 Skia...』
    据我所知,Android上Flutter也自己打了一个skia,并不是用的OS的skia。

    作者回复: 感谢提醒,查了下engine源码,确实如此

    2019-07-23
    6
  • felix
    老师能不能谈谈flutter的局限,或是跨平台的局限 ,flutter也没能(或是还没有)很好解决的问题。

    作者回复: 跨平台的局限就是真正的多端一致性很难完全保证,RN这种就不说了,很多组件的表现行为两边都不一样。
    就连Flutter也只能做到渲染层以上的多端一致性,还是有一些原生的东西(比如Push、地图、定位、蓝牙、WebView)绕不开,需要通过在原生上写插件来搞定。不过话说回来,如果真的绕开了,那Flutter就变成操作系统了,打出来的包没个几百兆估计是搞不定的

    2019-07-10
    3
  • HuDP
    感觉这种教学流程很好 开头有个大致的了解而不是一上来就扎进编码细节无法自拔
    2019-07-07
    3
  • 微笑美男😄
    深度优先 广度优先 不是很理解

    作者回复: 深度优先和广度优先是图/树结构中的概念:一层一层由上至下/由内而外遍历的方式,叫广度优先遍历;沿着一个节点方向深入探索,走到头再回退寻找其他方向的变量方式,叫做深度优先遍历。
    如果对这两个概念不熟悉的话,可以看一下数据结构中图和树部分的内容

    2019-09-29
    2
  • 巫山老妖
    跨平台(一套代码可以同时运行在iOS和Android平台)
    高保真(一整套包括底层渲染逻辑和上层开发语言的完整解决方案)
    高性能(代码执行效率和渲染性能媲美原生App的体验)

    学习这个专栏最好不让自己陷阱细节,而是从整体去理解Flutter的核心技术,通过实战,比如做一些小Demo来体会新的开发模式,再逐步深入,这样会更加扎实。

    作者回复: 赞👍

    2019-09-27
    2
  • Bojack
    从原理上来说flutter在两个原生端渲染应该是一致的,但是实际中发现还是有些区别的,比如下拉刷新这个组件,作者知道导致这个差异性的原因吗?

    作者回复: 为了尽可能模仿的比较像原生,ListView这个控件在Android和iOS上一些拖拽和滚动行为还是有差异的。依赖这些行为的下拉刷新组件也不例外

    2019-07-11
    2
  • Young
    在不同平台基于Skia引擎提供统一的渲染,学习的话,可以去flutter的中文网线先上手,然后结合老师的专栏
    2019-07-07
    2
  • Geek_yy
    Skia 引擎加工成 GPU 数据, 为什么不直接提供给 GPU 渲染,而又opengl最终提供给gpu渲染

    作者回复: OpenGL是Skia的绘图引擎

    2019-07-06
    1
    2
  • 神经蛙
    合成那一部分不太理解。
    “大量渲染内容的重复绘制”,这里的重复指的是什么,比如绘制Text('A')和Text('B')属于重复绘制吗?
    “根据图层大小、层级......将相同的图层归类合并”,什么情况下属于相同元素?
    归类合并怎么理解?是像photoshop中的图层合并一样吗?

    作者回复: 1.比如两个Widget A和B,如果A已经完全能够把B遮盖住,B的图层就没必要绘制了。
    2.归类合并可以按photoshop图层合并理解。

    2019-07-21
    1
  • xyl
    webgl是基于opengl的,skia也是基于opengl的,这两者有什么区别呢?

    作者回复: webgl派生于opengl,是isa的关系;
    skia是基于opengl,是use的关系。

    2019-07-15
    1
  • 回眸~
    热更新方案有没有啊老师

    作者回复: Flutter确实不支持动态化,不过业界已经有团队使用JSCore实现动态布局了,预计下半年会有一些较为成熟的方案出现

    2019-07-08
    1
  • 白马啸西风
    老师,最近公司在考虑用flutter完成一个交通类的APP,里面有很多地图,要调用高德API,flutter能够胜任吗?

    作者回复: 把地图封装成一个独立的控件,暴露接口给dart层,内嵌在flutter widget中就可以了。具体可以参考27节

    2019-10-21
  • 雷声大
    那张节点树还是没有看明白,既然 5 是 2 的子节点,为啥和 2 挤在一个圆里面,而不是像 3 和 4 一样作为子节点?

    作者回复: 父子之间一开始是在不同的层级,但中间会经历视图层级的合并(自动or手动),把一些能够合并的视图(比如纯叠加展示,无需交互的)都合为一层。
    这里说的是针对合并后的状态描述

    2019-10-04
  • 雷声大
    openGL 不是也是一个绘图引擎么? 他和 skia 的分工是什么样子的啊?

    作者回复: OpenGL是skia的渲染后端,主要用于GPU硬件加速

    2019-10-04
  • 达摩院扫地僧♠
    老师,重回边界是系统自动帮我们完成得吗,可以手动设置吗

    作者回复: 可以,具体怎么操作可以参考第37节的内容

    2019-09-27
  • 这得从我捡到一个鼠标垫开始说起
    还是有点不明白跨平台的原理,skia可以和gpu交互(不论是ios还是Android),也就是说操作系统是有统一的标准可以和skia这个引擎直接交互吗?

    作者回复: 这个交互标准就是opengl呀

    2019-08-14
收起评论
39
返回
顶部