element ui 框架的优势_Flutter 框架层次结构

作者：Frederik Schweiger

链接：

https://medium.com/flutter-community/the-layer-cake-widgets-elements-renderobjects-7644c3142401

说明：声明原创才能给文章加标签

Flutter 是一个非常优秀的跨平台开发框架，基于 Flutter 我们可以用很少的代码快速的开发出界面精美的 APP ，同时热重载机制也极大的提高了我们的开发效率，并且基于 Flutter开发的 APP 运行起来也是如丝般顺滑，能够达到 120 fps。

那么，你对此有没有过疑问，Flutter 是怎么这么快的？这里面有什么奥秘吗？或者，更直接一点，Flutter 到底是怎么工作的？接下来的内容希望能够给你答案。

你肯定早就听说过了，Flutter 中万物皆是 Widget，你的 app 是一个 widget，text 是一个widget，一个 widget 外面包裹的 padding 也是一个 widget ，甚至手势识别的功能也是通过 widget 来实现的。当然，这不是全部的真相，如果我告诉你，确实我们通过使用 widget 让我们的开发变得简单高效，但是我们能够创建一个 Flutter app 不适用哪怕是一个 widget 呢？接下来，就让我稍微深入的探索一下这个框架吧。

01

—

框架入门

也许你已经在一些类似于‘Flutter入门介绍’的文章中对Flutter有了比较大致的了解，但是你可能没有准备好去理解这些层次结构背后的那些概念和原理，也行你也曾和我一样，呆呆的看着这张图片却得不到任何东西，别担心，我会帮助你的，我们还是先来看一下这个图片吧。

Flutter 框架由许多抽象的层级组成，在这些层级的最顶端是我们经常用到的Material和Cupertino Widget，这下面是封装更通用组件的 Widget 层。通常情况下，你会发现你仅仅使用这两层中的 Widget 就够用了，并且目前你所能看到或者使用的，也基本都来着这两层，比如页面脚手架组件 Scaffold 和 FlaotingActionButton 来自 Meterial 包，Column 和 GestureDector 来自 widgets 层。 

在Widget层下面是 Rendering 层。Rendering层简化了布局和绘制过程。它是 dart:ui 层的抽象化。dart:ui是框架的最底层，它负责处理与 Flutter Engine 的通信。

简而言之，层级越高，封装度越高，我们使用越方便，然后层级越低使用起来可能更加自由，控制粒度更精细，当然也会更加复杂。

dart:ui 层

dart:ui library 暴露了最底层的服务，Flutter 框架基于这一层来构建应用程序，比如输入驱动、，绘制