flutter架构(第四节)

2021年11月24日 阅读数:5
这篇文章主要向大家介绍flutter架构(第四节),主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

Flutter入门html

 Flutter的安装与设置(第一节)linux

 35分钟教你学会dart(第二节)​​android

每一个 Flutter 开发人员都应该知道的 16 个 Dart 技巧和窍门(第三节)ios

​​flutter架构(第四节)​​git


欢迎来到个人第四篇文章,在那这里您将了解 Flutter 框架的架构,并了解如何使用一些好的 linter 规则设置 Flutter 项目。github

flutter架构


flutter架构(第四节)_flutter

从概念上看,Flutter 架构由三层构成:web

  • 框架(Dart):当您编写 Flutter 应用程序时,您直接与该层中的高级 API 进行交互。
  • Skia Engine (C++):这是用 C/C++ 编写的,并提供用于渲染、文本布局等的低级 API。是Flutter系统的核心。引擎提供了一系列Flutter核心API的底层实现,例如图形(经过Skia),文字布局,文件等,是链接框架和系统(Andoird/iOS)的桥梁。
  • Embedder (Platform-specific):Flutter 使用它来与底层操做系统通讯并访问各类服务。它基本是由平台对应的语言实现的,例如: 在Android上是由Java和C++实现;在iOS是由Objective-C/Objective-C++实现。主要为Flutter系统提供了一个入口,Flutter系统经过该入口访问底层系统提供的服务,例如输入法,绘制surface等。

按照设计,Flutter 控制在屏幕上绘制的每一个像素。Flutter 框架提供了一组丰富的 UI 组件(称为小部件),它们与 iOS 和 Android 上的原生 UI 控件很是匹配。shell

其中,framework层中的每个组件均是可选的和能够代替的。Framework是本节要关注的部分。从下到上,其主要包括:macos

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



Flutter框架是一个分层的结构,每一个层都创建在前一层之上。编程

最下层embedder,提供五个thread,将引擎移植到平台的中间层代码 渲染设置,原生插件,打包,线程管理,事件循环交互操做。

主要对应engine里面shell相关模块,common是对外的统一接口,gpu是gpu相关的统一接口,platform下面的对应的不一样平台的支撑,分辨是哦android,darwin,embedder,fuchsia,glfw,linux,windows,common。其次是profiling,性能调优方面的支持。

engine/embedder层的架构


flutter架构(第四节)_flutter_02

Flutter web support

虽然通常的架构概念适用于Flutter支持的全部平台,但Flutter的Web支持有一些独特的特色值得讨论。

Dart自从JavaScript语言存在以来就一直在编译成JavaScript,其工具链针对开发和生产目的进行了优化。许多重要的应用程序从Dart编译成JavaScript,并在今天的生产中运行,包括Google Ads的广告商工具。由于Flutter框架是用Dart编写的,因此编译成JavaScript相对简单。

然而,用C++编写的Flutter引擎被设计成与底层操做系统而非网络浏览器的接口。所以,须要采用不一样的方法。在网络上,Flutter在标准浏览器API之上提供了引擎的从新实现。目前,咱们有两种选择来渲染网络上的Flutter内容。HTML和WebGL。在HTML模式下,Flutter使用HTML、CSS、Canvas和SVG。为了渲染到WebGL,Flutter使用了一个编译成WebAssembly的Skia版本,称为CanvasKit。虽然HTML模式提供了最好的代码大小特性,但CanvasKit提供了最快的路径到浏览器的图形堆栈,并提供了一些更高的图形保真度与本地移动目标5。

网页版的架构层图以下。

flutter架构(第四节)_flutter_03

也许与Flutter运行的其余平台相比,最显著的区别是,Flutter不须要提供Dart运行时。相反,Flutter框架(以及你编写的任何代码)被编译成JavaScript。值得注意的是,Dart在全部模式中不多有语言语义上的差别(JIT与AOT,native与web编译),大多数开发者永远不会写一行代码碰到这样的差别。

在开发的时候,Flutter web使用的是dartdevc,这是一个支持增量编译的编译器,所以容许应用程序的热重启(虽然目前还不能热重载)。相反,当你准备为web建立一个生产应用时,使用dart2js,Dart的高度优化的生产JavaScript编译器,将Flutter核心和框架与你的应用一块儿打包成一个最小化的源文件,能够部署到任何web服务器。代码能够在一个文件中提供,也能够经过延迟导入分割成多个文件。


声明式编程模型

Flutter 使用声明式编程模型。Flutter 小部件经过覆盖​​​​ ​build()​​方法来定义它们的 UI,该方法是将状态转换为 UI 的函数:

UI = f(状态)

小型、单一用途的小部件组合在一块儿以建立更复杂、更专业的小部件来表明您的应用程序 UI。所以,整个应用程序由一个所谓的widget-tree 表示。例如,这是默认 Flutter 计数器应用程序的小部件树的简化版本:

MyApp

MaterialApp

MyHomePage

Scaffold

appBar: AppBar

title: Text

body: Center

Column

Text

Text

floatingActionButton: FloatingActionButton

Icon

在接下来有关状态管理的课程中,咱们将讨论如何在状态更改时重建 UI ,以及可使用哪些技术来重建 UI 。但如今这就是你须要的所有理论。若是你想更深刻地解释 Flutter 架构,没有比官方文档更好的地方了:

这是一篇很长的文章,但若是您想了解 Flutter 的底层工做原理,则值得一读。更实用的东西。

项目设置

当你建立一个新的 Flutter 项目时,会为你生成一些文件和文件夹。

android/

ios/

lib/

main.dart

macos/

test/

web/

.packages

pubspec.yaml

README.md

最重要的文件称为​​pubspec.yaml​​. 这用于指定应用程序的依赖项。这些资源解释了此文件的工做原理以及如何使用它来安装软件包:

linting

除此以外,我强烈建议为您的项目启用linting。最简单的方法是安装官方​​<code>flutter_lints</code>​​​软件包。这包含一组推荐的 Flutter 应用程序、包和插件的 lint,以鼓励良好的编码实践。另请参阅​​全部受支持规则的列表和说明​​。推荐的 lint 规则对于大多数项目来讲已经足够了。若是您愿意,能够经过添加​


​analysis_options.yaml​​文件来自定义 lint 规则。这是有关它的深刻指南:


特别是,请阅读最后的“轻松管理 lint 规则”部分。这解释了如何建立一组干净且可维护的规则,您能够在应用程序中调整这些规则。

Flutter 项目中的一些规则

当你开始一个新的 Flutter 项目时,启用 linter 规则是你能够作的最好的事情之一。可是,若是您想构建一些具备后端、多个环境等功能的严肃应用程序,则须要考虑更多事项。这是一个有用的规则:

关于代码生成


​​若是你想偷工减料,节省一些开发时间,你能够在你的项目中使用


代码生成。有一系列不一样的工具可供使用,不管是处理本地化、资产、解析 JSON、生成模型类、实现服务定位器、路由仍是使用不可变状态。惟一要作的就是调查可用的工具和包,并选择最好的工具和包来知足您的项目需求。为了快速启动 Flutter 项目,我建议查看[​


​很是好的 CLI​​。它能够为您节省几个小时的配置时间(不幸的是,我是经过艰难的方式学会的)。

若是你们喜欢的话,请持续关注我,我将在将来,继续给你们带来这一系列。