Flutter系列（三） 整体架构

您好，欢迎关注我的专栏，本篇是关于 Flutter 系列的第三篇，从简单的 Flutter 介绍开始，一步步带你了解进入 Flutter 的世界。你最好有一定的移动开发经验，如果没有也不要担心，在我的专栏底部给我留言，我会尽我的能力给你解答。

上篇文章我们介绍了用 Flutter 开发第一个跨平台应用程序，相信大家一定印象深刻，本篇文章介绍 Flutter 平台的整体架构。

一.核心原则

之前专栏有提到过，Flutter 的SDK中包括一个现代的响应式框架、一个2D渲染引擎、现成的widget和开发工具。这些组件可以帮助您快速地设计、构建、测试和调试应用程序。

一切皆 Widget

在Flutter中，所有的界面元素全部是Widget，不管是View也好，容器也好，窗体也好，还是布局也好，全部都是Wiget！

组合大于继承

还是那句话，在Flutter中，所有的界面元素全部是Widget。无论多复杂的Widget都是由无数个子Widget构成。你可以任意搭配Widget从而组装成强大的Widget。

分层的框架

Flutter框架是一个分层的结构，每个层都建立在前一层之上。

 

二.整体架构

引擎层

Flutter引擎层由Skia/Dart/Text三个部分构成，这一块使用C++开发。
Skia
skia是个2D向量图形处理函数库，包含字型、坐标转换，以及点阵图都有高效能且简洁的表现。不仅用于Google Chrome浏览器，新兴的Android开放手机平台也采用skia作为绘图处理，搭配OpenGL/ES与特定的硬件特征，强化显示的效果。

Dart
引擎层的Dart包括Dart运行时环境和垃圾回收(GC)，以及JIT（Just In Time）。

Text
文本渲染，采用libtxt库实现文本的渲染。

框架层

Flutter框架层由Dart实现，简单的分为四个部分，从下至上分别是dart:ui层/Rendering层/Widgets层和Material(Cupertino)层。

dart:ui
提供Flutter框架和引擎层之间的接口。

Rendering
渲染/动画/手势处理

Widgets
文本/图片/按钮的基础控件

Material/Cupertino

系统预制的Android/iOS风格控件。

这些层级为构建应用提供了很多种选择。使用自定义的方式构建应用可以使用框架的所有功能，或者使用 Widget 层的控件可以实现 UI 效果。 可以直接使用 Flutter 提供的 Widget 也可以自定义各种 Widget。如果上层实现不满足你的要求，你可以直接使用更底层的功能来自定义。

三.Flutter框架优势

快

Flutter真的很快，其诞生借鉴了很多其他平台的优势。

拿UI渲染层来说，所有的元素皆Widget，就连页面跳转都是Widget，因此无论是开发周期，开发难度还是对开发者素质要求而言都变得非常的简单，不会由于Activity生命周期结束导致内存溢出等等。用开发者调试工具就可以看出来所有的界面在Android算做一个View，没有层级的概念，因此渲染速度也是非常的快。

另外Flutter线程也很特别，与Java显著不同的是Dart的"线程"(Isolate)是不共享内存的，各自的堆(Heap)和栈(Stack)都是隔离的，彼此之间通过消息通道来通信。所以，Dart不存在数据竞争和变量状态同步的问题，整个Flutter Framework Widget的渲染过程都运行在一个isolate中，在代码调用 dart:ui库时，提供 dart:ui库中 Native Binding 实现。 这个运行时还控制着 VSync信号的传递、GPU数据的填充等，并且还负责把客户端的事件传递到运行时中的代码。

一套代码，可以跑在iOS和Android两个平台，以后会支持Google新操作系统以及ChromeOS，就连JS也可以直接转换。

Flutter的整体架构已经介绍完了，相信本篇文章读完之后，你已经更加了解Flutter了，下一篇文章我会介绍Flutter UI的基础构建，包括主题、Tab、自定义字体、抽屉、如何刷新UI等等。

 

转载于:https://www.cnblogs.com/1157760522ch/p/11065205.html