Flutter 的分层式架构有什么优势

大家应该都知道 Flutter 最大的特点之一就是跨端能够复用已有的代码,其背后主要就是 Flutter 可扩展的分层系统,这种分层式架构能让开发者在不同的平台上,都能开发拥有接近原生体验的高性能 Ap p,在尽可能共享复用代码的同时,也能包容例如iOS/Android的不同平台差异。

这篇文章就想探讨下 Flutter 这种分层式系统的优势和带给我们的一些价值点。

Flutter 分层式架构

Flutter 分层式架构比较特别的一点是上层组件依赖下层组件,组件之间是无法跨层访问的,更加通俗的来讲就是每个层都建立在另一层之上。另外,从整体上来看比较明显的优势:结构清晰、易于维护、组织灵活、数据安全等。

下面我们就用这张图看看官方文档中对 Flutter 架构的介绍:

针对我们前面说到的结构清晰这一点,应该大家非常直观的看到整个框架分为嵌入层、引擎层和框架层三层,下面一一的说下这三层的概况和特性:

1、Embedder 嵌入层

底层的 Embedder 也叫嵌入层,是Flutter接入原生平台的关键,其位于整个 Flutter 架构的底层,负责Engine的创建、管理与销毁,同时也为 Engine 提供绘制 UI 的接口,之所以 Flutter 应用程序可以运行在各种平台上,最关键的就是嵌入层,因为每个平台都有一个与之对应的嵌入层实现。

Flutter 的嵌入层是由适合于当前平台的语言编写,这里举两个例子大家就明白了,例如 Android 使用的是 Java 和 C++, iOS 和 macOS 使用的是 objective-C 和 objective-C++,Windows 和 Linux 使用的是 C++。 Flutter 代码可以通过嵌入层,以模块方式集成到现有的应用中,也可以作为应用的主体。

2、Engine 引擎层

引擎层是 Flutter 的核心关键,它主要使用 C++ 编写,提供了 Flutter 的核心 API 的具体实现,比如图形绘制、文本布局、本地文件 IO、网络请求 IO、编译工具等。

在这里引擎会将底层的 C++ 代码包装成 Dart 代码,通过 dart:ui 暴露给 Flutter 框架层。该库暴露了最底层的原语言,包括用于驱动输入、图形、和文本渲染的子系统的类。

3、Framework 框架层

框架层是我们与 Flutter 打交道最直接的方式,也是整个框架层中比较小的,为什么这样说呢?

因为我们用到的更高级的一些功能已经被拆分到不同的包当中了,例如例如 camera 和 webview 等。我们也可以从官方的仓库中集成更多的库来支撑具体业务,这也是为什么最开始会讲到 Flutter 分层式架构易于维护、组织灵活。

对于开发者的价值

为什么会说 Flutter 分层式架构对于开发者是一个福音呢?

一是因为从上面的结构图我们可以了解到,这种结构清晰、易于维护、组织灵活、数据安全,能够实现一次编码多平台适配。

二是这种设计模式的价值是帮助我们用更少的代码做更多的事情,例如:Material 层是通过组合来自 Widget 层的基本 Widget 来构建的, 并且 Widgets 层本身是通过较低级对象渲染层构建的。

三是编译时的热加载(或者也可以叫热更新)也能全平台支持,可以说非常友好,从开发效率来看有热加载的 Flutter 比原生会更高一些。当然也有同学可能会问:拥有这种热更新能力的app会被应用商店禁用吗?我个人认为从目前来看,无需担心 Apple 的审核机制,因为一些由 Flutter 打造的 App 已经荣获最佳设计应用称号。

你认为 Flutter 给你带来了什么价值?

相关推荐
学习使我快乐012 小时前
JS进阶 3——深入面向对象、原型
开发语言·前端·javascript
bobostudio19952 小时前
TypeScript 设计模式之【策略模式】
前端·javascript·设计模式·typescript·策略模式
黄尚圈圈3 小时前
Vue 中引入 ECharts 的详细步骤与示例
前端·vue.js·echarts
浮华似水4 小时前
简洁之道 - React Hook Form
前端
正小安6 小时前
如何在微信小程序中实现分包加载和预下载
前端·微信小程序·小程序
_.Switch8 小时前
Python Web 应用中的 API 网关集成与优化
开发语言·前端·后端·python·架构·log4j
一路向前的月光8 小时前
Vue2中的监听和计算属性的区别
前端·javascript·vue.js
长路 ㅤ   8 小时前
vite学习教程06、vite.config.js配置
前端·vite配置·端口设置·本地开发
长路 ㅤ   8 小时前
vue-live2d看板娘集成方案设计使用教程
前端·javascript·vue.js·live2d
Fan_web8 小时前
jQuery——事件委托
开发语言·前端·javascript·css·jquery