flutter架构（第四节）

Flutter入门

​​ Flutter的安装与设置（第一节）​​​

​​ 35分钟教你学会dart（第二节）​​​

​​每个 Flutter 开发人员都应该知道的 16 个 Dart 技巧和窍门（第三节）​

​​​flutter架构（第四节）​​​

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

flutter架构

从概念上看，Flutter 架构由三层构成：

• ​框架（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 控件非常匹配。

其中，framework层中的每一个组件均是可选的和可以代替的。Framework是本节要关注的部分。从下到上，其主要包括：

• 基础模块（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 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不需要提供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 的底层工作原理，则值得一读。更实用的东西。

项目设置

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

android/

ios/

lib/

  main.dart

macos/

test/

web/

.packages

pubspec.yaml

README.md

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

• ​​​https://dart.dev/tools/pub/pubspec​​​
• ​​​官网​​​
• ​​​如何使用包中文网​​​

linting

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

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

• ​​​入门：创建你的 Flutter 项目​​​

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

Flutter 项目中的一些规则

当你开始一个新的 Flutter 项目时，启用 linter 规则是你可以做的最好的事情之一。但是，如果您想构建一些具有后端、多个环境等功能的严肃应用程序，则需要考虑更多事项。这是一个有用的规则：

关于代码生成

​​如果你想偷工减料，节省一些开发时间，你可以在你的项目中使用

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

​​非常好的 CLI​​。它可以为您节省几个小时的配置时间（不幸的是，我是通过艰难的方式学会的）。

如果大家喜欢的话，请持续关注我，我将在未来，继续给大家带来这一系列。

​