Skip to main content

如何实现的

  • 树形结构：界面是一个树形结构，每个 Widget 都是一个不可变的配置对象，它们可以包含子级 Widget

    • 查找算法复杂度 nlogn

  • 更新过程：当子级 Widget 更新时，Flutter 会从该子级 Widget 开始递归地重新构建该子树，并且会比较新旧子树之间的差异（Diff 算法），以决定哪些部分需要重新布局和绘制，这个过程确实是一个异步过程

  • 脏更新：如果需要立即更新 Widget，可以调用 setState() 方法触发更新，这将立即标记 Widget 为 “脏”，并在下一个帧开始之前异步地进行重建和更新

  • 底层方法：Widget 构建递归的底层是 RenderObjectWidget，都有一个 RenderObject 类，用于实现渲染逻辑

触发屏幕刷新​

在每秒钟内，Flutter 渲染引擎能够将屏幕刷新120次，即120帧/秒 为了提高性能和节省电量，Flutter 默认帧率为60帧/秒

  • Flutter 默认会与硬件垂直同步信号进行同步
  • 手动调用 setState() 方法
  • 使用 AnimationController、Animation 或 Tween 等动画库的 API 来创建动画并触发屏幕刷新

组成结构​

  • Framework 框架层（Dart）
    • 在 Flutter 中一切UI皆 Widget
  • Engine 引擎层（C++）
    • 2D 渲染引擎：Skia（Chrome 和 Android均采用 Skia ）
    • GPU 加速
    • 音频
    • IO 操作
  • Plattform 平台层
    • 负责与不同的操作系统进行交互，并提供特定的 shell

四颗树​

  • Widget 树
  • Element 树：中间代理
  • Render 树：布局和渲染
  • Layer 树

项目结构​

flutter_app ├── android │   ├── .gradle │   ├── app │   ├── gradle │   └── tsettings.gradle ├── build ├── ios ├── lib │   ├── util：通用方法 │   ├── route：路由 │   ├── components：组件 │   ├── pages：页面 │   └── main.dart：入口文件 ├── test ├── web └── pubspec.yaml：配置文件

全局状态管理包​

  • Provider
  • Redux