image.png
Framework 提供了响应式的UI框架，Engine提供了Skia渲染引擎、Dart的运行时环境等。

Dart 支持JIT(Just In Time)和AOT（Ahead Of Time）.有内存安全保证，降低了安全漏洞风险。

Dart 语言特有的特性

Dart 是面向对象的编程语言、强类型语言、线程模型(Dart是单线程，底层提供多线程模型)、async/await

Dart 的线程模型

Dart 线程模型：微任务队列优先执行、然后才是事件队列。微任务队列应该尽量的少，防止阻塞事件队列导致UI卡顿。
image.png
Dart 线程管理：UI 主要将Widget描述布局信息分析成Tree；GPU 解析Layer Tree 转化为实际的GPU指令 GPU调度通知UI 去创建Layer Tree。
image.png

Dart 异步编程

async-await 代码块是对Future API的简化形式，将异步回调代码写成同步代码。 async关键字修饰的函数返回一个Future对象，不会阻塞当前线程，await关键字会同步执行，阻塞当前线程.

image.png
Future 的实现方式：
image.png

Flutter 工程结构

创建工程的方式

命令和IDE两种方式：

  1. flutter create mcapp

配置文件
image.png

Flutter 布局方式和差异

声明式UI和命令式UI

两种不同的编程范式
命令式UI：UI界面由一个个命令操作组合而成
声明式UI：将想要的UI描述出来即可,更适合做多设备适配，UI布局和控制逻辑通过reactive方式实现数据绑定，更好实现UI局部刷新机制，只刷新更新的部分。
image.png

理解Widget

Widget 是不可变的，@immutable ,StatelessWidget 无状态的Widget 和 StatefulWidget 有状态的Widget，Widget一定是不可变，如果需要改变属性需要用可变的State. StatelessWidget 和StatefulWidget 差别在于是否能重建。StatefulWidget 可以实现自重建。

State更新方式：

  • 通过state.setState()触发重布局
  • 需要遍历更新的Element，依次调用rebuild

声明周期：

  1. createState：创建State，当StatefulWidget被调用时会立即执行
  2. initState: State初始化方法，需调用super重写父类的方法
  3. didChangeDependencies: 该函数是在该组件依赖的State发生变化时调用，例如语言或者主题等。
  4. Build：返回需要渲染的Widget
  5. Reassemble: 开发阶段使用，在debug模式下调用
  6. didUpdateWidget: 主要是在组件重新构建时调用，比如热重载、或父组件发生build
  7. Deactivate: 在组件被移除节点后会被调用，如果该组件被移除节点，然后未被插入到其他节点时，则会继续调用dispose永久移除
  8. Dispose：永久移除组件，并释放组件资源

image.png