移动开发新利器 | 一文深刻了解 Flutter 界面开发

Flutter框架简介

跨平台应用的框架，没有使用WebView或者系统平台自带的控件，使用自身的高性能渲染引擎(Skia)自绘。
界面开发语言使用dart，底层渲染引擎使用C, C++。
组合大于继承，控件自己一般由许多小型、单用途的控件组成，结合起来产生强大的效果，类的层次结构是扁平的，以最大化可能的组合数量。

Rendering Pipeline

本文主要介绍build、layout、paint的三个阶段。

视图树

Widget&Element&RenderObject

Flutter视图树包含了三种树，上图只是介绍了三颗树的基础class的对应关系和功能介绍。

建立树

建立widget树

调用runApp(rootWidget)，将rootWidget传给rootElement,作为rootElement的子节点,生成Element树，由Element树生成Render树

Widget：存放渲染内容、视图布局信息,widget的属性最好都是immutable(如何更新数据呢？查看后续内容)
Element：存放上下文，经过Element遍历视图树，Element同时持有Widget和RenderObject
RenderObject：根据Widget的布局属性进行layout，paint Widget传人的内容

更新树

为何widget都是immutable？

Flutter界面开发是一种响应式编程，主张simple is fast，Flutter设计的初衷但愿数据变动时发送通知到对应的可变动节点（多是一个StatefullWidget子节点,也能够是rootWidget）,由上到下从新create widget树进行刷新，这种思路比较简单，不用关心数据变动会影响到哪些节点。

widget从新建立，element树和renderObject树是否也从新建立？

widget只是一个配置数据结构，建立是很是轻量的，加上Flutter团队对widget的建立/销毁作了优化，不用担忧整个widget树从新建立所带来的性能问题，可是renderobject就不同了，renderobject涉及到layout、paint等复杂操做，是一个真正渲染的view，整个view 树从新建立开销就比较大，因此答案是否认的。