Flutter系列(三) 整体架构

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

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

一.核心原则

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

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

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

分层的框架
Flutter框架是一个分层的结构,每个层都建立在前一层之上。
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等等。

猜你喜欢

转载自blog.51cto.com/14295695/2412050
今日推荐