dart - Flutter - 它在幕后是如何工作的？

Question

显然，flutter 是一个框架，可以使用一个代码库在 iOS 和 Android 上运行应用程序。但它是如何做到的呢？它会编译成 native 代码，还是该过程涉及中级语言或虚拟机？我尝试阅读 Github 上的一些源代码，但我找不到任何东西。

Answer 1

Flutter 一词指的是两个主要的事物/概念

1. Flutter SDK
2. Flutter 框架

1.Flutter SDK: 是一组工具，可让您在一个代码库中为 Android 和 iOS 平台构建任何类型的应用程序。

2.Flutter Framework:基本上它提供了所有预定义的小部件/小部件库、实用功能和包。

我们知道 Flutter 使用 Dart 作为编程语言。 Flutter 构建/开发的应用程序可以在 Android 和 iOS 上运行。因此，我们需要将 dart 代码编译成 native android/ios 代码。

And the compilation task is done by Flutter SDK.

说到编译，有两种操作/编译

• 静态编译
• 动态解释

静态编译:静态编译的程序在执行前都会被翻译成机器码。例如:AOT(提前)- C/C++。

动态解释:通过一对一的翻译来执行。例如:JIT(及时)- Javascript/Python。

---

现在我们知道了 dart 代码是如何转换成机器码的，以及两种编译方式。

但是这两种编译和 Flutter 有什么关系呢？

要知道这一点，我们需要知道几件事。 Flutter 不使用任何类型的 Web View 或操作系统的原生控件。相反，flutter 使用它自己的高性能渲染引擎(Skia)来绘制小部件。

而高性能主要靠两点来保证。

• Dart 语言
• 自己的引擎来渲染/绘制小部件

现在我们终于说到点子上了。在说 dart 语言编译过程之前，需要提一下 JIT & AOT 是指程序运行的方式，与编程语言没有强关联。有些语言同时支持 JIT 和 AOT，例如:Java、Python。

first time - Compiled -> intermediate byte code
later -> byte code will be directly executed

DART 运行时和编译器还支持两个关键功能的组合 - JIT 和 AOT。

---

？？？如果您有兴趣了解 flutter 框架结构？？？ 底部两层(基础和动画、绘画、手势)合并为一个 dart UI 层，dart:ui。

渲染层负责构建 UI 树，如果发生任何变化，比较和更新小部件树。最后在设备屏幕上绘制(类似于 React Virtual DOM)。

Widgets层是flutter提供的基础组件库。

而top(Material, Cupertino)是flutter提供的组件库。这也是我们开发人员最常处理的问题。

我想，现在大家都清楚了。快乐编码!

更新:2022 年 4 月 23 日

Flutter 的渲染引擎 Skia 使用 Metal 在 iOS 上渲染整个应用的 UI。与原生 iOS 开发不同，没有呈现 UI 组件。这一切都是使用 Apple 的 Metal 引擎绘制在屏幕上的。这是在xcode中使用3D调试的证明-

来源:book.flutterchina.club、flutter.dev、maximilian schwarzmüller 的 Flutter 类(class)、Flutter 官方 YouTube channel 、@vandadnp