面试复习题--Android和iOS设备上的绘制原理

深入理解Flutter 在 Android 和 iOS 设备上的绘制底层原理，核心是搞清楚 Flutter 如何跨这两个系统实现统一的 UI 渲染，以及它在两端分别与系统底层渲染框架的交互逻辑 ——Flutter 的核心特点是「自绘引擎（Skia）接管全渲染流程」，避开了 Android/iOS 的原生 UI 组件系统，因此两端的绘制原理上层逻辑完全统一，仅在「与系统底层渲染层的适配环节」存在差异。下面我会先讲 Flutter 绘制的通用核心，再分拆 Android/iOS 的具体实现，最后对比二者的关键差异。

一、Flutter 绘制的通用核心（跨平台统一逻辑）

不管是 Android 还是 iOS，Flutter 的绘制流程上层链路完全一致，这是它能实现「一次编码、多端同效」的核心，先掌握这部分再看两端差异会更清晰：

1. 核心原则：Flutter 的「自绘」特性

Flutter 不依赖 Android 的 View 体系、iOS 的 UIKit 体系，而是：

• 自己管理「布局→绘制→合成」全流程；
• 底层依赖Skia 图形引擎（Google 开源的 2D 图形库，也是 Chrome/Android 的默认图形引擎）完成跨平台的图形渲染；
• 最终仅向系统申请「一块渲染画布」（Android 的 Surface、iOS 的 Layer），将 Skia 绘制的内容输出到这块画布上，系统仅负责「显示画布内容」，不参与 Flutter 的 UI 逻辑。

2. Flutter 通用渲染管线（从上到下）

Flutter Dart层：Widget/Element/RenderObject

布局计算（Layout）：RenderObject计算大小/位置

绘制指令生成（Paint）：RenderObject生成Skia可识别的绘制指令

Flutter Engine C++层：将绘制指令传递给Skia

Skia引擎：跨平台统一处理绘制指令（光栅化/矢量渲染）

平台适配层：将Skia绘制结果输出到系统画布

系统渲染层：显示最终内容到屏幕

关键节点说明：

• RenderObject：Flutter 绘制的核心载体，Widget 最终会转化为 RenderObject，它定义了「如何布局」和「如何绘制」；
• Skia：核心角色，接收 Flutter Engine 的绘制指令，完成图形的光栅化（将矢量图形转为像素），并输出到系统提供的画布；
• 平台适配层：Flutter Engine 的底层模块，仅负责「对接系统渲染 API」，不修改绘制逻辑 —— 这是 Android/iOS 唯一的差异点。

二、Flutter 在 Android 上的绘制原理

Flutter 在 Android 上的核心是「将 Skia 的绘制结果输出到 Android 的 Surface」，并与 Android 的 Window/WMS/SurfaceFlinger 体系适配，具体流程如下：

1. 载体：Flutter 在 Android 上的「渲染容器」

Flutter 的 UI 在 Android 上的承载容器是 FlutterView（继承自 Android 的FrameLayout），它内部包含两类核心组件：

• FlutterNativeView：C++ 层 Flutter Engine 的