Flutter入门

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

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

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

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


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

flutter架构


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架构(第四节)_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架构(第四节)_dart_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​​。它可以为您节省几个小时的配置时间(不幸的是,我是通过艰难的方式学会的)。

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