HTML规范作者讲解Dart移动框架flutter的层设计


#1

偶然在某dart项目组成员twitter里面发现一个youtube视频,内容是Ian Hickson讲解flutter的层设计。

OK,你可能会问:Ian Hickson是谁?他是Web Applications即HTML5规范的主要作者之一,曾先后就职于Netscape、W3C、Opera;他于2005进入Google并工作,工作主要内容就是HTML规范的研发,而在近期他开始从事dart移动开发框架flutter的开发工作。

视频截图

视频地址:

https://www.youtube.com/watch?v=dkyY9WCGMi0

以下是我对视频主要内容的一些总结,仅供参考

Flutter总共分为四层,从下到上分别是:dart:ui,Rendering,Widgets,Material。参照下图:

dart:ui

dart:ui是flutter底层引擎所提供的一个dart库,是flutter对dart标准库的一个扩展。它提供了一套基于canvas的绘图api,也包含了用于跟操作系统交互的模块mojo,当然,还包括了所有dart标准库。dart:ui提供最基础的底层api,要直接使用它,你必须写非常多的代码,进行大量的运算:比如在每一帧中计算每个组件的坐标,编码工作很繁琐。一般来说,开发者不会直接使用dart:ui,但如果他们需要写一些特殊的应用,比如开发游戏,那可能就需要在dart:ui的基础上去构建自己的框架。

Rendering

Rendering层是布局(排版)抽象层,它把dart:ui层api抽象封装成大量的Render对象,免除了大量布局坐标的手动计算,并还对布局数据进行了缓存处理,提升了渲染效率。开发者使用层层嵌套的构造函数来构建一个render对象树,当发生用户交互或者数据发生改变时,需要显式更新对应的render对象,即更新UI。 这样的设计与其他UI系统非常类似,比如:web的dom,android与ios的视图层等。因为遵循了传统的开发思路,喜欢这种方式的开发者可以直接使用本层的api进行开发。

Widgets

Widgets层是对Rendering层对象的封装层,它引入element对象以及StatefulBuilder来管理底层的render对象,开发者使用不可变的Widget对象来创建UI,当数据发生变化的时候,再重新构建一个新的widget树即可,不再需要使用分离的代码来维护UI(Rendering层就要用一部分代码构建初始UI,另一部分更新UI)。这一层应该就是flutter默认的或者说最基础的组件库,你可以继承并修改它们,做成属于自己的组件。

Material

Material层相对来说最容易理解,它们就是使用Widgets层对象,实现了Material Design的顶层UI组件。