04 | Flutter区别于其他方案的关键技术是什么？
该思维导图由 AI 生成，仅供参考
Flutter 出现的历史背景
荧光笔
直线
曲线- 深入了解
- 翻译
- 解释
- 总结
Flutter是一种跨平台开发技术，利用Skia图像渲染引擎和Dart编程语言实现高保真、高性能的应用。相比其他跨平台技术，Flutter通过自己完成组件渲染的闭环，保证了视图渲染在Android和iOS上的高度一致性，并且在代码执行效率和渲染性能上可以媲美原生App的体验。Skia作为底层图像渲染引擎，为Flutter提供了跨平台渲染能力，最大限度地抹平平台差异，提高渲染效率与性能。而Dart语言则支持即时编译JIT和事前编译AOT，具有运行速度快、执行性能好的特点，同时也易于上手。Flutter的出现解决了跨平台开发方案的问题，为开发者和用户提供了良好的体验，因此受到越来越多的关注。 文章深入探讨了Flutter的架构和实现原理，从Embedder、Engine、Framework三层架构入手，详细介绍了Flutter的布局、绘制、合成和渲染四个阶段的工作原理。此外，文章还总结了学习Flutter所需的知识体系，为读者提供了清晰的学习路线。整体而言，本文通过深入浅出的方式，全面介绍了Flutter的技术特点和学习路径，为读者提供了全面的了解和学习指导。 总之，本文通过深入浅出的方式，全面介绍了Flutter的技术特点和学习路径，为读者提供了全面的了解和学习指导。
《Flutter 核心技术与实战》，新⼈⾸单¥59
全部留言(50)
- 最新
- 精选
Mkl我有个疑问， “以下图为例：节点 1 在绘制完自身后，会再绘制子节点 2 和 6，最后绘制子节点 5、3 和 4。” 这难道不是广度优先吗？深度优先不是先绘制1，然后2,3,5,4,6吗？作者回复: 确实是写错了，稍后我修改下。正确的绘制顺序是：节点1在绘制完自身后，会再绘制节点2，然后绘制它的子节点3、4和5，最后绘制节点6。
2019-07-0647
楚小奕『Skia 已然是 Android 官方的图像渲染引擎了，因此 Flutter Android SDK 无需内嵌 Skia...』 据我所知，Android上Flutter也自己打了一个skia，并不是用的OS的skia。作者回复: 感谢提醒，查了下engine源码，确实如此
2019-07-2326
felix老师能不能谈谈flutter的局限，或是跨平台的局限 ，flutter也没能（或是还没有）很好解决的问题。作者回复: 跨平台的局限就是真正的多端一致性很难完全保证，RN这种就不说了，很多组件的表现行为两边都不一样。 就连Flutter也只能做到渲染层以上的多端一致性，还是有一些原生的东西（比如Push、地图、定位、蓝牙、WebView）绕不开，需要通过在原生上写插件来搞定。不过话说回来，如果真的绕开了，那Flutter就变成操作系统了，打出来的包没个几百兆估计是搞不定的
2019-07-1011- jjlanbupt总感觉讲的还不是特别透彻，可能受限于篇幅原因吧，比如渲染的过程顺序这些相对于其他平台或者原生来说，为了避免重复绘制，到底做了哪些优化？深度优先遍历等应该是普遍的思想，另外希望老师多放一些相关知识点的链接，比如涉及到GPU的放一些讲解原理的优质文章链接，期待老师后面的讲解
作者回复: 后面会专门讲Widget的绘制流程的。 Flutter's Rendering Pipeline可以参考：https://www.youtube.com/watch?v=UUfXWzp0-DU
2019-07-0611 - xylwebgl是基于opengl的，skia也是基于opengl的，这两者有什么区别呢？
作者回复: webgl派生于opengl，是isa的关系； skia是基于opengl，是use的关系。
2019-07-158 
微笑美男😄深度优先 广度优先 不是很理解作者回复: 深度优先和广度优先是图/树结构中的概念：一层一层由上至下/由内而外遍历的方式，叫广度优先遍历；沿着一个节点方向深入探索，走到头再回退寻找其他方向的变量方式，叫做深度优先遍历。 如果对这两个概念不熟悉的话，可以看一下数据结构中图和树部分的内容
2019-09-2927
巫山老妖
跨平台（一套代码可以同时运行在iOS和Android平台） 高保真（一整套包括底层渲染逻辑和上层开发语言的完整解决方案） 高性能（代码执行效率和渲染性能媲美原生App的体验） 学习这个专栏最好不让自己陷阱细节，而是从整体去理解Flutter的核心技术，通过实战，比如做一些小Demo来体会新的开发模式，再逐步深入，这样会更加扎实。作者回复: 赞👍
2019-09-276- Geek_yySkia 引擎加工成 GPU 数据， 为什么不直接提供给 GPU 渲染，而又opengl最终提供给gpu渲染
作者回复: OpenGL是Skia的绘图引擎
2019-07-0624 
神经蛙合成那一部分不太理解。 “大量渲染内容的重复绘制”，这里的重复指的是什么，比如绘制Text('A')和Text('B')属于重复绘制吗？ “根据图层大小、层级......将相同的图层归类合并”，什么情况下属于相同元素？ 归类合并怎么理解？是像photoshop中的图层合并一样吗？作者回复: 1.比如两个Widget A和B，如果A已经完全能够把B遮盖住，B的图层就没必要绘制了。 2.归类合并可以按photoshop图层合并理解。
2019-07-212- Bojack从原理上来说flutter在两个原生端渲染应该是一致的，但是实际中发现还是有些区别的，比如下拉刷新这个组件，作者知道导致这个差异性的原因吗？
作者回复: 为了尽可能模仿的比较像原生，ListView这个控件在Android和iOS上一些拖拽和滚动行为还是有差异的。依赖这些行为的下拉刷新组件也不例外
2019-07-112