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 给你带来了什么价值?

相关推荐
阳光是sunny21 分钟前
别再被 worktree 绕晕了!AI 编程时代你必须掌握的 Git 隔离神器
前端·人工智能·后端
万少1 小时前
万少的博客 - 技术分享与解决方案
前端·javascript·后端
尘世中一位迷途小书童4 小时前
用 Cesium 撸了一个森林火情监控大屏,弧线、粒子、发光效果都齐了
前端·javascript
IT_陈寒5 小时前
垃圾回收器选错了,我的Java服务内存炸了
前端·人工智能·后端
月光下的丝瓜5 小时前
Flutter 国内安装指南
前端·flutter
玄星啊5 小时前
AI 编程的第 30 天,我怀念古法 Coding 了
前端·ai编程
Jolyne_5 小时前
Angular基础速通
前端·angular.js
锋行天下6 小时前
半秒开!还有谁!!!
前端·vue.js·架构
代码搬运媛7 小时前
git 下中文文件名乱码问题解决
前端
CaffeinePro7 小时前
告别知识点零散!React零基础通关,从环境搭建到Ant Design页面实战
前端·react.js