在这里插入图片描述

前言

Flutter采用三层架构设计，从下到上依次为：Embedder层、Engine层、Framework层。本文从宏观角度剖析Flutter框架层架构，帮助读者建立整体认知。

一、Flutter整体架构

Flutter的三层架构设计实现了职责分离和跨平台能力。

1.1 三层架构对比表

|| 层级 | 位置 | 主要职责 | 核心组件 | 平台依赖 |
|------|------|----------|----------|----------|
| Embedder层 | 最底层 | 平台适配 | Platform Embedder | 高度依赖 |
| Engine层 | 中间层 | 渲染引擎 | Skia, Dart VM, Text | 中度依赖 |
| Framework层 | 最上层 | 应用框架 | Widget, Element, RenderObject | 完全独立 |

1.2 三层架构关系图

┌─────────────────────────────────────────────────────┐
│           Framework Layer (框架层)                  │
│  ┌───────────────────────────────────────────────┐ │
│  │  Material / Cupertino / Widgets               │ │
│  │  Widget Tree / Element Tree / RenderObject Tree│ │
│  │  Animation / Gesture / Painting / Text       │ │
│  └───────────────────────────────────────────────┘ │
│                     ↓ Dart代码                      │
└─────────────────────────────────────────────────────┘
                     ↓ C++调用
┌─────────────────────────────────────────────────────┐
│            Engine Layer (引擎层)                    │
│  ┌───────────────────────────────────────────────┐ │
│  │  Skia/Impeller (图形渲染)                   │ │
│  │  Dart VM (虚拟机)                           │ │
│  │  Text (文本排版)                            │ │
│  └───────────────────────────────────────────────┘ │
│                     ↓ 平台API                     │
└─────────────────────────────────────────────────────┘
                     ↓ 原生调用
┌─────────────────────────────────────────────────────┐
│         Embedder Layer (嵌入层)                     │
│  ┌───────────────────────────────────────────────┐ │
│  │  iOS (Objective-C/Swift)                   │ │
│  │  Android (Java/Kotlin)                     │ │
│  │  Web (JavaScript)                          │ │
│  │  HarmonyOS (ArkTS)                         │ │
│  └───────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘

二、Framework层架构详解

Framework层是Flutter应用层的核心，完全用Dart语言实现。

2.1 Framework层子系统表

|| 子系统 | 核心类 | 主要功能 | 示例组件 |
|--------|--------|----------|----------|
| Widgets | Widget, Element | UI组件库 | Text, Container |
| Rendering | RenderObject | 布局和绘制 | RenderBox, RenderSliver |
| Animation | Animation, Tween | 动画管理 | AnimatedWidget |
| Gesture | GestureRecognizer | 手势识别 | GestureDetector |
| Painting | Canvas, Path | 绘图API | CustomPaint |
| Text | TextPainter, Paragraph | 文本渲染 | Text, RichText |
| Scheduler | SchedulerBinding | 任务调度 | 帧回调 |

2.2 Framework层核心模块图

Framework层 (Dart实现)
    ↓
├── Widgets子系统
│   ├── Widget (配置信息)
│   ├── Element (中间管理)
│   ├── RenderObjectWidget (渲染对象)
│   ├── InheritedWidget (数据传递)
│   └── ProxyWidget (代理包装)
│
├── Rendering子系统
│   ├── RenderObject (渲染基类)
│   ├── RenderBox (盒子模型)
│   ├── RenderSliver (滚动模型)
│   ├── Layout (布局管理)
│   └── Painting (绘制管理)
│
├── Animation子系统
│   ├── AnimationController (控制器)
│   ├── Animation (动画值)
│   ├── Tween (插值器)
│   └── Curve (曲线)
│
├── Gesture子系统
│   ├── GestureRecognizer (识别器)
│   ├── PointerEvent (指针事件)
│   ├── HitTest (命中测试)
│   └── GestureArena (竞技场)
│
├── Painting子系统
│   ├── Canvas (画布)
│   ├── Paint (画笔)
│   ├── Path (路径)
│   └── Image (图片)
│
├── Text子系统
│   ├── TextPainter (文本绘制器)
│   ├── Paragraph (文本段落)
│   ├── TextStyle (文本样式)
│   └── TextSpan (文本片段)
│
└── Scheduler子系统
    ├── SchedulerBinding (调度绑定)
    ├── FrameCallback (帧回调)
    ├── Microtask (微任务)
    └── TaskQueue (任务队列)

三、Framework层的三棵树

三棵树是Flutter高效渲染的核心机制。

3.1 三棵树关系表

|| 树 | 性质 | 生命周期 | 作用 | 内存占用 |
|—|------|----------|------|----------|
| Widget树 | 不可变 | 短暂（每次重建） | 描述UI配置 | 极轻 |
| Element树 | 可变 | 中等（复用更新） | 管理状态和更新 | 中等 |
| RenderObject树 | 可变 | 长（复用更新） | 执行布局和绘制 | 较重 |

3.2 三棵树协作流程图

┌─────────────────────────────────────────────┐
│          Widget树 (配置层)                │
│  ┌───────────────────────────────────────┐ │
│  │  Widget - 轻量级配置信息            │ │
│  │  - 不可变                           │ │
│  │  - 每次重建                         │ │
│  │  - 仅描述UI                         │ │
│  └───────────────────────────────────────┘ │
└─────────────────┬───────────────────────────┘
                  │ mount()
                  ↓
┌─────────────────────────────────────────────┐
│          Element树 (管理层)              │
│  ┌───────────────────────────────────────┐ │
│  │  Element - 中间管理层               │ │
│  │  - 可变复用                         │ │
│  │  - 管理状态                         │ │
│  │  - 协调Widget和RenderObject        │ │
│  └───────────────────────────────────────┘ │
└─────────────────┬───────────────────────────┘
                  │ createRenderObject()
                  ↓
┌─────────────────────────────────────────────┐
│       RenderObject树 (渲染层)            │
│  ┌───────────────────────────────────────┐ │
│  │  RenderObject - 真正渲染对象        │ │
│  │  - 可变复用                         │ │
│  │  - 执行布局                         │ │
│  │  - 执行绘制                         │ │
│  └───────────────────────────────────────┘ │
└─────────────────────────────────────────────┘

3.3 三棵树同步流程

setState() 触发重建
  ↓
┌─────────────────────────────────────┐
│  新Widget树创建 (轻量级)          │
└───────────┬─────────────────────────┘
            ↓
┌─────────────────────────────────────┐
│  Element比较 (canUpdate)           │
│  - 相同: 复用Element              │
│  - 不同: 创建新Element             │
└───────────┬─────────────────────────┘
            ↓
┌─────────────────────────────────────┐
│  RenderObject更新                 │
│  - 标记需要布局                   │
│  - 标记需要绘制                   │
└───────────┬─────────────────────────┘
            ↓
┌─────────────────────────────────────┐
│  layout() 执行布局计算             │
└───────────┬─────────────────────────┘
            ↓
┌─────────────────────────────────────┐
│  paint() 执行绘制操作             │
└───────────┬─────────────────────────┘
            ↓
┌─────────────────────────────────────┐
│  显示到屏幕                       │
└─────────────────────────────────────┘

四、Framework层的渲染流程

Framework层通过PipelineOwner管理渲染流程。

4.1 渲染流程阶段表

|| 阶段 | 方法 | 作用 | 执行时机 |
|------|------|------|----------|
| Build | build() | 构建Widget树 | setState()、父Widget更新 |
| Layout | performLayout() | 计算尺寸和位置 | markNeedsLayout() |
| Paint | paint() | 绘制到画布 | markNeedsPaint() |
| Composite | 合成 | 组装图层 | 渲染完成后 |

4.2 一帧渲染完整流程图

┌─────────────────────────────────────────────┐
│  Scheduler请求新帧 (scheduleFrame)        │
└───────────────┬───────────────────────────┘
                ↓
┌─────────────────────────────────────────────┐
│  beginFrame() - 帧开始                   │
│  - 计算时间戳                             │
│  - 执行微任务队列                         │
└───────────────┬───────────────────────────┘
                ↓
┌─────────────────────────────────────────────┐
│  buildScope() - 构建阶段                  │
│  - 标记dirty的Element重建                 │
│  - 创建新Widget树                         │
└───────────────┬───────────────────────────┘
                ↓
┌─────────────────────────────────────────────┐
│  flushLayout() - 布局阶段                 │
│  - 标记needsLayout的RenderObject          │
│  - 执行performLayout()                    │
│  - 计算尺寸和位置                         │
└───────────────┬───────────────────────────┘
                ↓
┌─────────────────────────────────────────────┐
│  flushPaint() - 绘制阶段                  │
│  - 标记needsPaint的RenderObject           │
│  - 执行paint()                            │
│  - 绘制到PictureRecorder                  │
└───────────────┬───────────────────────────┘
                ↓
┌─────────────────────────────────────────────┐
│  compositeFrame() - 合成阶段              │
│  - 组装图层                               │
│  - 发送给Engine层                         │
└───────────────┬───────────────────────────┘
                ↓
┌─────────────────────────────────────────────┐
│  endFrame() - 帧结束                      │
│  - 绘制到屏幕                             │
└─────────────────────────────────────────────┘

五、Framework层与HarmonyOS集成

Framework层代码完全独立于平台，可以在HarmonyOS上无缝运行。

5.1 跨平台支持表

|| 特性 | iOS | Android | Web | HarmonyOS |
|------|-----|---------|-----|-----------|
| Framework层 | ✅ 完全支持 | ✅ 完全支持 | ✅ 完全支持 | ✅ 完全支持 |
| Widget渲染 | ✅ 完全支持 | ✅ 完全支持 | ✅ 完全支持 | ✅ 完全支持 |
| 动画系统 | ✅ 完全支持 | ✅ 完全支持 | ✅ 完全支持 | ✅ 完全支持 |
| 手势识别 | ✅ 完全支持 | ✅ 完全支持 | ✅ 完全支持 | ✅ 完全支持 |
| PlatformChannel | ✅ 完全支持 | ✅ 完全支持 | ✅ 完全支持 | ✅ 完全支持 |

5.2 HarmonyOS集成架构

Flutter应用代码 (Dart)
    ↓
┌─────────────────────────────────────┐
│  Framework层 (100%兼容)            │
│  - Widget组件                       │
│  - 三棵树机制                       │
│  - 渲染流程                         │
│  - 动画系统                         │
└──────────────┬──────────────────────┘
               ↓
┌─────────────────────────────────────┐
│  Engine层 (HarmonyOS适配)          │
│  - Skia/Impeller                   │
│  - Dart VM                         │
│  - 文本排版                        │
└──────────────┬──────────────────────┘
               ↓
┌─────────────────────────────────────┐
│  Embedder层 (HarmonyOS原生)        │
│  - ArkTS平台适配                   │
│  - N-API集成                       │
│  - 系统事件处理                    │
└──────────────┬──────────────────────┘
               ↓
┌─────────────────────────────────────┐
│  HarmonyOS原生层                   │
│  - ArkUI框架                       │
│  - 系统服务                        │
│  - 原生API                         │
└─────────────────────────────────────┘

六、Framework层示例演示

本示例展示了Flutter Framework层的三层架构和核心组件。

6.1 示例功能说明

演示内容：
  ├─ Flutter三层架构可视化
  │   ├─ Framework层 - Widget、Element、RenderObject
  │   ├─ Engine层 - Skia、Dart VM、Text
  │   └─ Embedder层 - iOS、Android、HarmonyOS
  │
  └─ Framework核心组件示例
      ├─ Widget组件 (StatelessWidget、StatefulWidget)
      ├─ Element组件 (ComponentElement)
      └─ RenderObject组件 (RenderBox)

6.2 运行示例项目

# 进入项目目录
cd flutter_examples/framework_architecture_demo_01_1

# 运行应用
flutter run -d chrome

6.3 最小化Widget示例

// StatelessWidget - 无状态组件
class SimpleWidget extends StatelessWidget {
  const SimpleWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return const Text('Hello Flutter Framework!');
  }
}

// StatefulWidget - 有状态组件
class CounterWidget extends StatefulWidget {
  const CounterWidget({super.key});

  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        setState(() {
          _count++;
        });
      },
      child: Text('计数: $_count'),
    );
  }
}

七、总结

Flutter Framework层通过精妙的三层架构和三棵树设计，实现了声明式UI与高性能渲染的完美结合。

核心要点总结表

|| 概念 | 核心思想 | 关键收益 |
|------|------|----------|
| 三层架构 | Framework/Engine/Embedder | 跨平台能力 |
| 三棵树 | Widget/Element/RenderObject | 性能优化 |
| 不可变Widget | 配置信息而非对象 | 轻量级重建 |
| 可变Element | 状态管理与复用 | 高效更新 |
| 渲染流程 | Build/Layout/Paint | 60 FPS流畅度 |

Framework层学习路径

┌─────────────┐
│ 理解三层架构 │ → 建立整体认知
└──────┬──────┘
       ↓
┌─────────────┐
│ 掌握三棵树  │ → 理解渲染机制
└──────┬──────┘
       ↓
┌─────────────┐
│ 熟悉子系统  │ → 掌握各组件
└──────┬──────┘
       ↓
┌─────────────┐
│ 理解渲染流程│ → 优化性能
└──────┬──────┘
       ↓
┌─────────────┐
│ 跨平台集成  │ → 部署HarmonyOS
└─────────────┘

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

# flutter # harmonyos # 架构
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

cover

React Native 鸿蒙跨平台开发：实现Excel数据表格

avatar HarmonyOS开发者社区
cover

Flutter 框架跨平台鸿蒙开发——Framework层Rendering子系统详解

avatar HarmonyOS开发者社区
cover

React Native 鸿蒙跨平台开发：虚拟列表代码实现加载

avatar HarmonyOS开发者社区