要想真正理解一门技术，首先理解他的运行机制架构 ，我觉得这是很有必要的，当然很多兄弟们直接复制粘贴搞，也是可以，也是可以能搞出点花样出来的，（因为我刚开始也是这样的），只是开发到一定程度你还是得回头理解，要不然就会降低效率了，所以这一篇章总结下flutter的架构和绘制
首先学习之前先推荐大家看下下面这篇文章
Flutter架构系列
然后我再开始我的表演
image.png
先上一个官方架构图
官方架构图.png
理解下Framework，Engine
一,Framework的理解
（1）Framework的这一层就是我们所说的应用层，这一层基本都是dart语言所实现的。
（2）这里framework的底下两层（marerial风格，coupertino风格），动画手势这个ui库是谷歌提供个开发者调用的。
（3）Rendering层：它主要是负责构建UI树，当UI树上的element发生改变时，都会将变化的ui更新，然后呈现给屏幕的用户。
（4）windget层，这个一定意义来说对于开发者是最重要关心的，这个基础组件库，这个层上Flutter也默认给我们提供了满足我们日常开发的组件库
二,Engine的理解
（1）这一层是C++语言实现的sdk,而且这一层是Framework的ui库调用都会Engine这一层。
（2）简单介绍下里面架构的几个元素。skia是2D渲染引擎（我也不懂哈哈），Dart为dart的运行引擎，Text为文字排版引擎。
好了，大体理解这个架构图是什么东西，但是对于很多东西都有点懵，我们下面着重理解三个东西吧，Widget，Element，RenderObject
（1）Widget 是视图中控件的最小单位，有点类似于Android中的view，其中Widget里面存储了一个视图的配置信息，包括布局、属性等
（2）Element 是widget的一个抽象，它其实承载了视图构建的上下文数据。构建系统通过遍历 Element树来构建 RenderObject数据， Element存放Widget上下文，通过遍历视图树，Element 同时持有 Widget 和 RenderObject；
（3）RenderObject，官网定义：An object in the render tree.渲染树中的一个对象。负责的是渲染工作，所以在 RenderObject树中会发生 Layout、Paint的绘制事件，那么这里就有很多性能优化可以考究了，所以说当学习Flutter到一定程度还得回到架构上面学习。
好了，这一篇章先理解这些概念先，下一篇章再着重写下widget中内容state那些，毕竟一一切皆widget
网友评论