Flutter框架分析(一)--架构总览

·  阅读 984

1. 前言

Flutter是Google打造的高性能、跨平台的UI框架。它可以给开发者提供简单、高效的方式来构建和部署跨平台、高性能移动应用;给用户提供漂亮、无平台区分的app体验。 Flutter是如何做到这一点的呢?它的框架结构是怎么样的呢?接下来,我将写一系列的文章分析Flutter的框架层,结合源码分析Flutter框架所采用的各种黑科技。本文是这个系列文章的第一篇,主要介绍Flutter框架的总览。

2. Flutter体系架构

Flutter被设计成一个可扩展,分层的系统。它包含了一系列依赖其下层的独立库。其示意图见下图.

image.png

其中,framework层中的每一个组件均是可选的和可以代替的。从上图可知,Flutter系统总共可以分为三层。上层的框架(Framework),中层的引擎(Engine),以及底层的嵌入层(Embedder)。

  • 框架(Framework):框架层是纯dart语言实现的一个响应式框架,开发者平常需要通过该层和Flutter系统交互。
  • 引擎(Engine):引擎层绝大部分是用C++实现的,其为Flutter系统的核心。引擎提供了一系列Flutter核心API的底层实现,例如图形(通过Skia),文字布局,文件等,是连接框架和系统(Andoird/iOS)的桥梁。
  • 嵌入层(Embedder):嵌入层基本是由平台对应的语言实现的,例如:在Android上是由Java和C++实现;在iOS是由Objective-C/Objective-C++实现。嵌入层为Flutter系统提供了一个入口,Flutter系统通过该入口访问底层系统提供的服务,例如输入法,绘制surface等。

其中,Framework是我们这一系列文章主要关注的部分。从下到上,其主要包括:

  • 基础模块(foundational)及基础服务,例如animation,painting,以及gestures,这三种基础服务是为了方便上层调用对基础模块的抽象。
  • Rendering 层,为处理图层提供了抽象组件。通过这一层,你能构建一棵可绘制对象的树。你可以动态操作这些对象,这棵树可以根据你的修改自动更新这棵树。
  • Widgets层,是组件的抽象。每个render对象都有对应的widget对象。除此之外,widgets层允许你定义你能重复使用的组合组件。同时,此层引入了响应式编程模型。
  • Material和Cupertino库提供了一系列Material和iOS设计风格的组件。

3. 不同跨平台技术对比

市面上有很多对比不同跨平台技术的文章,例如Flutter实战中的移动开发技术简介。本文以表格形式简单介绍一下不同跨平台技术的特点和优劣势等,然后说明一下flutter性能能媲美原生应用的原因。 目前市面上主要有H5+原生,JavaScript+原生渲染,自绘UI+原生。三种跨平台技术,其对比结果如下。

技术类型UI渲染方式性能开发效率动态化框架代表
H5+原生WebView渲染一般支持Cordova、Ionic
JavaScript+原生渲染原生控件渲染支持RN、Weex
自绘UI+原生自带引擎渲染非常好Flutter高, QT低默认不支持QT、Flutter

由图可见,Flutter最大的优势,是其出色的性能。根据Google官方的宣传,其性能是可以媲美原生的。这一点我们可以通过以下结构示意图看出来。

截屏2021-04-07下午10.17.33.png 原生应用是由其框架直接通过Skia调用GPU进行绘制,但是RN等JavaScript+原生渲染跨平台技术是需要由其框架先调用原生框架,再通过原生框架调用Skia,最后调用至GPU进行绘制的。因此,其调用步骤上相对于原生多了一层,理论上其绘制性能将比原生差。 但是Flutter则不同,由于其应用也是由Flutter框架直接通过Skia调用GPU进行绘制,因此只要其框架的性能能媲美原生框架的性能,则其绘制性能就可以媲美原生。不仅如此,由于Skia是Flutter自带的,其升级非常方便,而Android系统相对而言升级比较缓慢,因此如果Flutter使用了更高性能的Skia库,其绘制性能甚至可能超过原生。

4. 小结

本文主要介绍了Flutter框架体系,其中重点介绍了Flutter的Framework层结构。之后对比了Flutter和其他跨平台技术,并通过它们绘制原理的对比分析,解释了Flutter性能可以媲美原生应用的原因。

5. 相关文章

Flutter框架分析(二)-- Widget
Flutter框架分析(三)-- Element
Flutter框架分析(四)-RenderObject
Flutter框架分析(五)-Widget,Element,RenderObject树
Flutter框架分析(六)-Constraint
Flutter框架分析(七)-relayoutBoundary
Flutter框架分析(八)-Platform Channel
Flutter框架分析- Parent Data
Flutter框架分析 -InheritedWidget

分类:
Android
标签:
收藏成功!
已添加到「」, 点击更改