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

Flutter框架简介

22f7a69b7286df09befbd4a03933a15bc86c85fa

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

Rendering Pipeline

e14265e8fb37a8a781dc580f91c384e915ea27e2

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

视图树

Widget&Element&RenderObject

c7c98769f643d0e88040c5812a068642ba755cf4

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

创建树

d47e62d2b349aca45e42305ed6714efbe5ed61d9创建widget树

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

2417b19a14ec662dcfd3a635b79a012b257a4e67


d47e62d2b349aca45e42305ed6714efbe5ed61d9Widget:存放渲染内容、视图布局信息,widget的属性最好都是immutable(如何更新数据呢?查看后续内容)
d47e62d2b349aca45e42305ed6714efbe5ed61d9Element:存放上下文,通过Element遍历视图树,Element同时持有Widget和RenderObject
d47e62d2b349aca45e42305ed6714efbe5ed61d9RenderObject:根据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 树重新创建开销就比较大,所以答案是否定的。

猜你喜欢

转载自my.oschina.net/u/3611008/blog/1825983