Flutter 渲染引擎的核心架构

Flutter 的渲染引擎基于 Skia 图形库，通过自建的渲染管道实现高性能绘制。核心模块分为三层：框架层（Dart 实现）、引擎层（C++实现）、平台嵌入层。框架层将 Widget 转换为 RenderObject 树，引擎层通过 Layer Tree 生成 Skia 绘图指令，最终由平台线程提交到 GPU。

跨平台一致的绘制原理

Flutter 通过忽略原生平台控件，直接通过 Skia 在画布上绘制 UI。所有视觉元素被转换为统一的 SkPicture 指令，在不同平台上使用相同的 Skia 后端渲染。这避免了传统跨平台框架的"桥接"性能损耗，确保像素级一致性。

渲染流程分为四个阶段：

• 布局（Layout）：RenderObject 根据约束计算大小和位置
• 绘制（Paint）：生成包含绘图命令的 Layer Tree
• 合成（Compositing）：将图层合并为纹理
• 光栅化（Rasterize）：通过 Skia 转换为平台特定的 GPU 指令

性能优化关键技术

保留渲染结果：通过 RepaintBoundary 将静态内容缓存为独立纹理，避免重复绘制。

线程架构：

• UI 线程：处理 Dart 代码和构建渲染树
• GPU 线程：执行光栅化和 GPU 命令提交
• I/O 线程：处理图像解码等耗时操作

Jank 避免机制：通过 VSYNC 信号同步渲染周期，确保帧率稳定。当一帧超过 16ms 时，引擎会丢弃延迟帧而非卡顿。

跨平台适配实现方案

平台通道（Platform Channel）：通过 MethodChannel 实现 Dart 与原生代码通信，解决平台特定功能调用问题。

嵌入层适配：针对不同平台实现原生嵌入层：

• iOS：通过 Metal/OpenGL 与 CoreAnimation 集成
• Android：通过 SurfaceTexture 与 View 系统交互
• Web：编译为 JavaScript 并使用 Canvas 2D/WebGL

// 示例：自定义绘制逻辑
class CustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = Colors.blue;
    canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), paint);
  }
  
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

动态更新与热重载

Dirty Region 管理：当 Widget 状态变化时，框架通过比较树结构确定需要重绘的区域，最小化渲染范围。

JIT/AOT 模式：

• 开发模式：采用 JIT 编译实现亚秒级热重载
• 生产模式：AOT 编译为原生机器码保证性能

渲染一致性保障机制

设备像素比处理：通过 MediaQuery 获取设备特性参数，所有尺寸逻辑使用与密度无关的 logical pixels。

文字渲染：使用自带的 txt 库处理文字排版，避免不同平台字体渲染差异。对于复杂文字（如阿拉伯语），实现自定义的文本布局器。

动画同步：基于统一的时间驱动模型（Ticker），所有动画值与平台刷新率严格同步，避免跳帧现象。