1.1 Flutter 简介与架构原理

空中海

147人浏览 · 2026-04-10 19:01:04

空中海 · 2026-04-10 19:01:04 发布

Flutter 是 Google 推出的开源跨平台 UI 框架，使用 Dart 语言编写，能够从单一代码库构建适用于 Android、iOS、Web、Desktop 的高性能应用。

一、Flutter 的三层架构

Flutter 的整体架构由三个层次组成，从上到下依次为：

┌─────────────────────────────────────────────────┐
│              Framework 层（Dart）                │
│  Material / Cupertino → Widgets → Rendering      │
│  Animation → Painting → Gestures → Foundation   │
├─────────────────────────────────────────────────┤
│              Engine 层（C++）                    │
│  Skia 渲染引擎 / Dart 运行时（AOT & JIT）         │
│  Text Layout / Platform Channels / Compositor   │
├─────────────────────────────────────────────────┤
│           Embedder 层（平台特定实现）              │
│      Android（Java/Kotlin）                      │
│      iOS / macOS（Objective-C / Swift）          │
│      Windows / Linux / Web                      │
└─────────────────────────────────────────────────┘

1.1 Framework 层（Dart）

Framework 层是开发者日常接触最多的层，完全使用 Dart 编写，是 Flutter 的 UI 开发核心。

子层	功能描述
Material / Cupertino	Google Material Design 和 iOS 风格组件库
Widgets	所有 UI 构建块的基础，声明式 UI 范式
Rendering	布局与绘制引擎，RenderObject 树管理
Animation	动画控制器与过渡效果
Painting	Canvas 绘制抽象
Gestures	手势识别（点击、滑动、缩放等）
Foundation	基础工具类（ChangeNotifier、Key、debugPrint 等）

关键特性：

所有组件（Widget）均以 Dart 代码编写
React 风格的声明式 UI，状态驱动界面重建
与平台 Native 组件无依赖，完全自绘

1.2 Engine 层（C++）

Engine 层是 Flutter 的核心运行时，使用 C++ 实现，负责实际的渲染和运行时支持。

主要组成：

① Skia 渲染引擎

Google 开源 2D 图形库（Flutter 3.x 起引入 Impeller 替代 Skia）
直接调用 GPU（OpenGL / Metal / Vulkan）进行绘制
跨平台统一渲染，保证像素级一致性

② Dart 运行时

支持 AOT（Ahead-of-Time） 与 JIT（Just-in-Time） 两种模式
Release 模式 → AOT 编译为原生机器码，性能接近原生
Debug 模式 → JIT 编译，支持 Hot Reload

③ 文本布局（Text Layout）

使用 LibTxt + HarfBuzz + Minikin 进行文字排版
支持复杂文字（阿拉伯语、CJK 等）

④ Platform Channel

提供 Dart 与原生平台（Java/Swift）之间的通信桥梁

1.3 Embedder 层（平台特定实现）

Embedder 层是 Flutter 与各个操作系统之间的"胶水层"，负责：

职责	说明
创建渲染 Surface	提供 OpenGL / Metal / Vulkan 绘制表面
事件分发	将触摸、键盘、鼠标等输入事件传入 Flutter
平台服务	文件访问、网络、相机等系统能力
线程管理	UI Thread、GPU Thread、IO Thread、Platform Thread

各平台 Embedder 实现语言：

平台	实现语言
Android	Java / Kotlin
iOS / macOS	Objective-C / Swift
Windows	C++
Linux	C++
Web	JavaScript（dart2js / WASM）

二、Dart 与 Flutter 的关系

Flutter 选择 Dart 作为开发语言，原因如下：

特性	说明
AOT 编译	Release 时编译为高效原生代码
JIT 支持	Debug 时支持 Hot Reload，极大提升开发效率
单线程事件循环	类似 JavaScript，异步模型简单直观
强类型 + 空安全	Null-Safety 机制，减少运行时错误
优化的对象分配	短生命周期对象分配效率极高，适合 Widget 频繁重建的场景

Dart 与 Flutter 的职责划分：

Dart 语言        →   编写逻辑、UI、状态管理等所有应用代码
Dart VM / AOT   →   执行 Dart 代码
Flutter Engine  →   提供 Skia 渲染、平台通道
Flutter Framework →  提供组件库、布局、动画等高层 API

三、Skia 渲染引擎原理

3.1 渲染流程

Flutter 的每一帧渲染流程如下：

① Build 阶段
   Widget 树 → 生成/更新 Element 树

② Layout 阶段
   Element 树 → RenderObject 树（计算尺寸与位置）

③ Paint 阶段
   RenderObject → 绘制命令写入 Layer 记录

④ Composite 阶段
   Layer Tree → Skia / GPU 合成最终帧

⑤ Display 阶段
   GPU 渲染结果 → 显示到屏幕

3.2 自绘 vs 原生控件

方案	示例	特点
自绘（Flutter 默认）	Flutter Widget	跨平台一致，性能稳定
平台视图	AndroidView / UiKitView	嵌入原生控件，有性能开销

Flutter 不使用 平台原生 UI 控件（如 Android 的 TextView），所有 Widget 均通过 Skia/Impeller 自行绘制，这是其"像素级跨平台一致性"的根本原因。

3.3 Impeller（新一代渲染引擎）

Flutter 3.x 引入 Impeller 逐步替代 Skia：

特性	Skia	Impeller
Shader 编译	运行时编译（导致首帧卡顿）	预编译，启动更流畅
图形 API	OpenGL / Vulkan / Metal	Metal（iOS）/ Vulkan（Android）
性能稳定性	偶发 Jank	更低 Jank 率

四、Flutter 与其他跨平台方案对比

方案	渲染方式	语言	性能	一致性
Flutter	自绘（Skia/Impeller）	Dart	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
React Native	桥接原生控件	JavaScript	⭐⭐⭐	⭐⭐⭐
Kotlin Multiplatform	原生 UI	Kotlin	⭐⭐⭐⭐⭐	⭐⭐
Uni-app / 小程序	WebView / 原生混合	JS/TS	⭐⭐	⭐⭐

小结

知识点	核心要点
三层架构	Framework（Dart）→ Engine（C++）→ Embedder（平台）
Framework 层	声明式 UI、Widget 树，完全 Dart 实现
Engine 层	Skia 渲染 + Dart 运行时（AOT/JIT）
Embedder 层	各平台胶水层，提供 Surface 和系统服务
Dart 选型	AOT 性能 + JIT 热重载 + 单线程异步模型
自绘机制	不依赖原生控件，像素级跨平台一致