跨平台技术演进及Flutter未来( 六 ) _跨平台

6. Widget架构概览Flutter引擎启动后执行Dart业务，是通过runApp(Widget app)方法，那Widget又是什么呢？

文章插图
Widget是所有Flutter应用程序的基石， Widget可以是一个按钮，一种字体或者颜色，一个布局属性等，在Flutter的UI世界可谓是“万物皆Widget” 。常见的Widget子类为StatelessWidget(无状态)和StatefulWidget(有状态)；

StatelessWidget：内部没有保存状态， UI界面创建后不会发生改变；
StatefulWidget：内部有保存状态，当状态发生改变，调用setState方法会触发StatefulWidget的UI发生更新，对于自定义继承自StatefulWidget的子类，必须要重写createState方法。

三棵树

文章插图
图解：

Widget是为Element描述需要的配置，负责创建Element ，决定Element是否需要更新。Flutter Framework通过差分算法比对Widget树前后的变化，决定Element的State是否改变。当重建Widget树后并未发生改变，则Element不会触发重绘，则就是Widget树的重建并不一定会触发Element树的重建。
Element表示Widget配置树的特定位置的一个实例，同时持有Widget和RenderObject ，负责管理Widget配置和RenderObject渲染。Element状态由Flutter Framework管理，开发人员只需更改Widget即可。
RenderObject表示渲染树的一个对象，负责真正的渲染工作，比如测量大小、位置、绘制等都由RenderObject完成。

可见，开发者通过Widget配置， Framework通过比对Widget配置来更新Element ，最后调度RenderObject Tree完成布局排列和绘制。

7. 渲染原理Dart的UI采用Widget来实现，最终转换为RenderObject ，那界面又是如何渲染的呢？

文章插图
渲染过程， UI线程完成布局、绘制操作，生成Layer Tree；GPU线程执行合成并光栅化后交给GPU来处理，其中几个关键步骤：

Animate: 遍历_transientCallbacks ，执行动画回调方法；
Build: 对于dirty的元素会执行build构造，没有dirty元素则不会执行，对应于buildScope
Layout: 计算渲染对象大小和位置，对应于flushLayout ，这个过程可能会嵌套再调用build操作；
Compositing bits: 更新具有脏合成位的任何渲染对象，对应于flushCompositingBits；
Paint: 将绘制命令记录到Layer ，对应于flushPaint；
Compositing: 将Compositing bits发送给GPU ，对应于compositeFrame；

GPU线程通过skia向GPU硬件绘制一帧的数据， GPU将帧信息保存到FrameBuffer里面，然后视频控制器会根据VSync信号从FrameBuffer取帧数据传递给显示器，从而显示出最终的画面。

8. Platform ChannelsFlutter框架提供了UI的控件支持，对于APP除了UI还有其他依赖于Native平台的支持，比如调用Camera的功能，该怎么办呢？为此， Flutter通过提供Platform Channel的功能，使得Dart代码具备与Native交互的能力。

文章插图
Platform Channel用于Flutter与Native之间的消息传递，整个过程的消息与响应是异步执行，不会阻塞用户界面。Flutter引擎框架已完成桥接的通道，这样开发者只需在Native层编写定制的Android/iOS代码，即可在Dart代码中直接调用，这也就是Flutter Plugin插件的一种形式。

三、结束语科技不断在进步，技术不断发展，移动跨平台技术几乎从Android、iOS诞生不久便出现，已发展快10年。时至今日，兼具跨端高效率与高性能体验的Flutter力压群雄，崭露头角，已然成为当下最热门的移动端新技术，全球越来越多的公司在Flutter技术布局并落地产品应用，社区也非常活跃。
笔者之前一直从事于Android操作系统底层研发工作，今年刚接触Flutter ， Flutter作为一门全新的跨平台技术框架，不断深究会发现这是一个小型系统，涉及到的技术很广：