Flutter：原理

2023-01-29 本文已影响0人时光啊混蛋_97boy

原创：有趣知识点摸索型文章
创作不易，请珍惜，之后会持续更新，不断完善
个人比较喜欢做笔记和写总结，毕竟好记性不如烂笔头哈哈，这些文章记录了我的IOS成长历程，希望能与大家一起进步
温馨提示：由于简书不支持目录跳转，大家可通过command + F 输入目录标题后迅速寻找到你所需要的内容

Flutter是Google推出的一套开源跨平台UI框架，可以快速地在Android、iOS和Web平台上构建高质量的原生用户界面。同时，Flutter还是Google新研发的Fuchsia操作系统的默认开发套件。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。

Flutter采用现代响应式框架构建，其中心思想是使用组件来构建应用的UI。当组件的状态发生改变时，组件会重构它的描述，Flutter会对比之前的描述，以确定底层渲染树从当前状态转换到下一个状态所需要的最小更改。

2、Flutter的优缺点

优点

热重载（Hot Reload）：利用 Android Studio 直接一个ctrl+r就可以重载，模拟器立马就可以看见效果，相比原生冗长的编译过程强很多
一切皆为 Widget 的理念：对于Flutter来说，手机应用里的所有东西都是Widget，通过可组合的空间集合、丰富的动画库、分层扩展的架构，实现了富有感染力的灵活界面设计
良好的运行效率：利用 Flutter 构建的应用在运行效率上会和原生应用差不多。

缺点

不支持热更新
第三方库有限，需要自己造轮子
Dart 语言编写，增加了学习难度，并且学习了 Dart 之后无其他用处

3、Flutter的理念架构

Widget

在 Flutter 中，几乎所有东西都是Widget。将一个Widget想象为一个可视化的组件，当你需要构建与布局相关的任何内容时，你就需要使用Widget。

Widget树

Widget以树结构进行组织。包含其他Widget的widget被称为父Widget(或widget容器)。

Context

仅仅是已创建的所有Widget树结构中的某个Widget的位置引用。简而言之，将context作为widget树的一部分，其中context所对应的widget被添加到此树中。一个context只从属于一个widget，它和widget一样是链接在一起的，并且会形成一个context树。

State

应用于State的任何更改都会强制重建Widget。

StatelessWidget

一旦创建就不关心任何变化，在下次构建之前都不会改变。它们除了依赖于自身的配置信息（在父节点构建时提供）外不再依赖于任何其他信息。比如典型的Text、Row、Column、Container等，都是StatelessWidget。它的生命周期相当简单：初始化、通过build()渲染。

StatefulWidget

在生命周期内，该类Widget所持有的数据可能会发生变化，这样的数据被称为State，这些拥有动态内部数据的Widget被称为StatefulWidget。比如复选框、Button等。State会与Context相关联，并且此关联是永久性的。

4、Flutter的绘制流程

a、渲染机制

Flutter 只关心向 GPU提供视图数据，GPU的 VSync信号同步到 UI线程，UI线程使用 Dart来构建抽象的视图结构，这份数据结构在 GPU线程进行图层合成，视图数据提供给 Skia引擎渲染为 GPU数据，这些数据通过 OpenGL提供给 GPU。

Flutter 既不使用WebView，也不使用系统的原生控件，而是通过高性能的渲染引擎来画控件，它只有C/C++代码编写的单一层，这样开发者更容易控制系统。

Flutter用什么技术构建的? C, C++, Dart, and Skia (2D 渲染引擎)。Flutter 和 React Native 不同主要在于 Flutter 是直接通过skia渲染的，而 React Native 是将js中的控件转化为原生控件，通过原生去渲染的。

b、热重载

热加载是注入源代码到运行中的Dart虚拟机，包括增加新的类，和给已有类增加新的方法和变量以及修改已有方法。热加载功能是状态保持的(stateful)，可以快速重复屏幕内容而不需要从主屏幕开始加载。

热重载的流程可以分为 5 步，包括：扫描工程改动、增量编译、推送更新、代码合并、Widget 重建。Flutter在接收到代码变更后，并不会让 App 重新启动执行，而只会触发 Widget树的重新绘制，因此可以保持改动前的状态，大大缩短了从代码修改到看到修改产生的变化之间所需要的时间。

另一方面，由于涉及到状态的保存与恢复，涉及状态兼容与状态初始化的场景，热重载是无法支持的，如改动前后 Widget状态无法兼容、全局变量与静态属性的更改、main 方法里的更改、initState方法里的更改、枚举和泛型的更改等。

可以发现，热重载提高了调试 UI 的效率，非常适合写界面样式这样需要反复查看修改效果的场景。

5、Flutter 与原生Android、iOS进行通信的原理

Flutter 通过PlatformChannel与原生进行交互，其中 PlatformChannel分为三种：

BasicMessageChannel ：用于传递字符串和半结构化的信息。
MethodChannel ：用于传递方法调用（method invocation）。
EventChannel： 用于数据流（event streams）的通信。

Flutter如何将代码运行在Android上?

引擎的C/C++代码使用Android的NDK编译的，并且框架的大部分和APP代码作为本地代码(由Dart编译器编译的)运行的。

Flutter如何将代码运行在iOS上?

引擎的C/C++代码使用LLVM编译，并且任何Dart代码都是AOT编译成本地代码。

可以嵌入Flutter视图到你已经存在的Android和iOSAPP中。