OpenHarmony ArkUI 架构分析
分析版本: OpenHarmony Master Branch
分析时间: 2026-03-17
一、ArkUI 整体架构
┌─────────────────────────────────────────────────────────────────┐
│ 应用层 (ETS/ArkTS) │
│ Launcher (pagedesktop) / 其他应用 │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ Bridge Layer (JS/C++ 桥接层) │
│ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────┐ │
│ │ declarative_frontend│ │ js_frontend │ │ cj_frontend │ │
│ │ (声明式前端-主流程) │ │ (JS前端-兼容) │ │ (CangJie前端) │ │
│ └────────┬─────────┘ └──────────────────┘ └──────────────┘ │
│ │ │
│ ┌────────▼─────────────────────────────────────────────────┐ │
│ │ FrontendDelegateDeclarative │ │
│ │ (前端委托 - 协调 JS 引擎与 Native 框架) │ │
│ └────────┬────────────────────────────────────────────────┘ │
│ │ │
│ ┌────────▼─────────────────────────────────────────────────┐ │
│ │ PageRouterManager (NG) │ │
│ │ (页面路由管理 - 页面栈 Push/Pop/Replace) │ │
│ └────────┬────────────────────────────────────────────────┘ │
└───────────┼─────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ Core Layer (NG 架构) │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ PipelineContext │ │
│ │ (渲染上下文 - 管理整个应用生命周期、VSYNC、任务调度) │ │
│ └──────────────────────────┬───────────────────────────────┘ │
│ │ │
│ ┌──────────────────────────▼───────────────────────────────┐ │
│ │ StageManager │ │
│ │ (舞台管理器 - 管理页面栈、页面切换、过渡动画) │ │
│ └──────────────────────────┬───────────────────────────────┘ │
│ │ │
│ ┌──────────────────────────▼───────────────────────────────┐ │
│ │ FrameNode 树 (控件树) │ │
│ │ RootPattern ──► StagePattern ──► PageNode ──► ... │ │
│ │ │ │
│ │ Pattern 层 (行为逻辑) │ │
│ │ LayoutAlgorithm (布局算法) │ │
│ │ PaintMethod (绘制方法) │ │
│ └───────────────────────────────────────────────────────────┘ │
└───────────────────────────────────────────────────────────────────┘
二、核心组件详解
1. 渲染上下文 (PipelineContext)
文件: foundation/arkui/ace_engine/frameworks/core/pipeline_ng/pipeline_context.h
PipelineContext 是整个渲染系统的核心：
- 管理 Vsync 信号分发
- 任务调度 (JS任务、UI任务)
- 维护 FrameNode 树
- 处理焦点、安全区、拖拽等系统级功能
关键头文件引用:
#include "core/pipeline_ng/pipeline_context.h"
#include "core/components_ng/pattern/root/root_pattern.h"
#include "core/components_ng/pattern/stage/stage_manager.h"
2. 舞台管理器 (StageManager)
文件: foundation/arkui/ace_engine/frameworks/core/components_ng/pattern/stage/stage_manager.h
StageManager 负责：
- 页面切换 (Push/Pop/Replace)
- 页面过渡动画
- 页面显示/隐藏状态管理
关键方法：
virtual bool PushPage(const RefPtr<FrameNode>& node, bool needHideLast = true, bool needTransition = true,
const std::function<bool()>&& pushIntentPageCallback = nullptr);
virtual bool PopPage(const RefPtr<FrameNode>& inPageNode, bool needShowNext = true, bool needTransition = true);
virtual void StartTransition(const RefPtr<FrameNode>& srcPage, const RefPtr<FrameNode>& destPage, RouteType type);
注：Replace 语义通过
PushPage实现（PushUrl 和 ReplaceUrl 底层均调用 PushPage）。
3. 根节点模式 (RootPattern / StagePattern)
RootPattern (foundation/arkui/ace_engine/frameworks/core/components_ng/pattern/root/root_pattern.h):
- 根节点，FrameNode 树的根
- 设置 measure boundary
- 处理 Overlay 位置更新
StagePattern (foundation/arkui/ace_engine/frameworks/core/components_ng/pattern/stage/stage_pattern.h):
- 舞台模式，管理主窗口内容区的页面栈
- 页面切换触发
三、界面初始化流程
┌──────────────────────────────────────────────────────────────────┐
│ 冷启动流程 │
├──────────────────────────────────────────────────────────────────┤
│ │
│ 1. Ability 启动 │
│ │ │
│ ▼ │
│ 2. 创建/获取 PipelineContext │
│ │ │
│ ▼ │
│ 3. FrontendDelegateDeclarative::RunPage() │
│ │ │
│ ▼ │
│ 4. PageRouterManager::RunPage() │
│ │ │
│ ├─► ManifestParser 解析 manifest.json │
│ │ │
│ └─► PageRouterManager::LoadPage() │
│ │ │
│ ▼ │
│ 5. JS 引擎加载 .abc (Ark ByteCode) 字节码 │
│ │ │
│ 6. ArkTS 组件树构建 (JSView → FrameNode) │
│ │ │
│ │ view_stack_processor │
│ ▼ │
│ 7. FrameNode::BuildPage() │
│ │ │
│ │ 创建完整 FrameNode 树 │
│ ▼ │
│ 8. StageManager::PushPage() │
│ │ │
│ │ 页面入栈 + 过渡动画 │
│ ▼ │
│ 9. PipelineContext::OnSurfaceDensityChanged() │
│ │ │
│ │ Measure → Layout → Paint │
│ ▼ │
│ 10. 首次渲染完成 │
│ │
└──────────────────────────────────────────────────────────────────┘
详细步骤分析
Step 1-2: 系统通过 Ability 框架创建窗口，获取或创建 PipelineContext
Step 3: FrontendDelegateDeclarative::RunPage() 被调用
源码 (frontend_delegate_declarative.cpp):
UIContentErrorCode FrontendDelegateDeclarative::RunPage(
const std::string& url, const std::string& params, const std::string& profile, bool isNamedRouter)
{
LOGI("RunPage:%{public}s", url.c_str());
// 解析 manifest.json
// 调用 PageRouterManager::RunPage()
}
Step 4-6: PageRouterManager::RunPage() 协调 JS 引擎加载页面代码并构建组件树
关键文件:
foundation/arkui/ace_engine/frameworks/bridge/declarative_frontend/frontend_delegate_declarative.cppfoundation/arkui/ace_engine/frameworks/bridge/declarative_frontend/ng/page_router_manager.cpp
Step 7: JsAcePage::BuildPage() 创建 PageNode (FrameNode 的子类)
Step 8: StageManager::PushPage() 页面入栈
四、桌面应用 (Launcher) 加载流程
源码路径: applications/standard/launcher/
文件结构:
applications/standard/launcher/
├── feature/
│ ├── pagedesktop/ (桌面主页面)
│ │ ├── src/main/ets/default/
│ │ │ ├── common/
│ │ │ │ ├── components/ (AppItem, FolderItem 等组件)
│ │ │ │ │ ├── AppItem.ets
│ │ │ │ │ ├── FolderItem.ets
│ │ │ │ │ ├── FormItem.ets
│ │ │ │ │ ├── SwiperPage.ets
│ │ │ │ │ └── GridSwiper.ets
│ │ │ │ ├── viewmodel/
│ │ │ │ │ └── PageDesktopViewModel.ts
│ │ │ │ ├── PageDesktopPreLoader.ts
│ │ │ │ ├── PageDesktopDragHandler.ts
│ │ │ │ └── PageDesktopCloseAppHandler.ts
│ │ │ └── layout/
│ │ │ └── PageDesktopLayout.ets
│ │ └── index.ts (导出入口)
│ ├── appcenter/ (应用中心)
│ ├── bigfolder/ (大文件夹)
│ ├── gesturenavigation/(手势导航)
│ └── ...
加载流程
┌─────────────────────────────────────────────────────────────────┐
│ Launcher 启动流程 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 1. Launcher Ability 冷启动 │
│ │ │
│ ▼ │
│ 2. LoadManifest → 解析 main_pages.json │
│ │ │
│ ▼ │
│ 3. RunPage("pages/Desktop", ...) │
│ │ │
│ ▼ │
│ 4. PageRouterManager 创建 PageNode │
│ │ │
│ ▼ │
│ 5. JS 引擎加载 Desktop.ets → 构建 FrameNode 树 │
│ │ │
│ │ Desktop.ets 结构: │
│ │ ┌─────────────────────────────────────┐ │
│ │ │ @Component │ │
│ │ │ struct Desktop { │ │
│ │ │ @Builder PageDesktopLayout() { │ │
│ │ │ Grid() { │ │
│ │ │ ForEach(appList, ...) { │ │
│ │ │ AppItem() │ │
│ │ │ } │ │
│ │ │ } │ │
│ │ │ } │ │
│ │ │ } │ │
│ │ └─────────────────────────────────────┘ │
│ ▼ │
│ 6. StageManager::PushPage() 入栈 │
│ │ │
│ ▼ │
│ 7. PageDesktopViewModel 加载应用图标/名称 │
│ │ │
│ ▼ │
│ 8. 渲染完成 → 显示桌面 │
│ │
└─────────────────────────────────────────────────────────────────┘
五、NG 架构核心设计
FrameNode 树结构
RootNode
│
├── RootPattern (根模式 - measure boundary)
│
└── StageNode (舞台节点 - 页面栈容器)
│
├── PageNode (页面1) ← 最近使用的页面
│ └── AppContent(实际内容)
│
├── PageNode (页面2) ← 次级页面
│
└── OverlayNode (浮层：Toast/Dialog)
Pattern 三层职责
| 层级 | 职责 | 示例文件 |
|---|---|---|
| Pattern | 行为逻辑、状态管理、生命周期 | text_pattern.cpp, button_pattern.cpp |
| LayoutAlgorithm | Measure/Layout 计算 | stage_layout_algorithm.cpp |
| PaintMethod | 绘制逻辑 | text_paint_method.cpp |
页面路由关键文件
| 文件路径 | 作用 |
|---|---|
foundation/arkui/ace_engine/frameworks/bridge/declarative_frontend/frontend_delegate_declarative.cpp |
前端委托，协调 JS 引擎和 UI 框架 |
foundation/arkui/ace_engine/frameworks/bridge/declarative_frontend/ng/page_router_manager.cpp |
页面路由管理 (Push/Pop/Replace) |
foundation/arkui/ace_engine/frameworks/core/components_ng/pattern/stage/stage_manager.cpp |
页面栈管理和切换动画 |
foundation/arkui/ace_engine/frameworks/core/pipeline_ng/pipeline_context.cpp |
渲染上下文，VSYNC 驱动 |
关键类继承关系
AceType (基类)
│
├── Pattern (行为模式基类)
│ ├── RootPattern
│ ├── StagePattern
│ └── [Component]Pattern (如 TextPattern, ButtonPattern)
│
├── FrameNode (渲染节点基类)
│ ├── RootNode
│ ├── StageNode
│ └── [Component]Node (如 TextNode, ButtonNode)
│
├── StageManager (舞台管理器)
│
└── LayoutAlgorithm (布局算法基类)
├── RootLayoutAlgorithm
└── StageLayoutAlgorithm
六、渲染管线详解
PipelineContext 在每帧 VSYNC 信号到达时驱动完整的渲染流程，分四个阶段：
VSYNC (ROSEN RenderService)
│
▼
PipelineContext::OnVsync()
│
▼
┌─────────────────────────────────────────────┐
│ Phase 1: Measure (测量) │
│ - 深度优先遍历 FrameNode 树 │
│ - 父节点向子节点传递约束 (LayoutConstraint) │
│ - 子节点计算自身所需尺寸并上报 │
│ - LayoutAlgorithm::Measure() │
├─────────────────────────────────────────────┤
│ Phase 2: Layout (布局) │
│ - 根据 measure 结果确定各节点位置 │
│ - 从根节点向下逐层分配坐标 (Offset) │
│ - LayoutAlgorithm::Layout() │
├─────────────────────────────────────────────┤
│ Phase 3: Draw (绘制) │
│ - 遍历脏区域生成绘制指令 │
│ - PaintMethod 生成 RSNode (RenderNode) │
│ - 更新 RenderService 渲染树 │
├─────────────────────────────────────────────┤
│ Phase 4: RenderService 合成与上屏 │
│ - GPU 硬件合成各图层 │
│ - 提交到屏幕显示 │
└─────────────────────────────────────────────┘
关键文件
| 文件 | 作用 |
|---|---|
core/pipeline_ng/pipeline_context.cpp |
VSYNC 分发、帧调度 |
core/components_ng/layout/layout_algorithm.h |
布局算法基类 |
core/components_ng/render/node_paint_method.h |
绘制方法基类 |
RenderService (外部组件, 见 foundation/graphic/rosen/) |
硬件合成与 GPU 渲染 |
七、事件处理机制
事件分发流程
触摸事件 (InputManager)
│
▼
RenderService ──► PipelineContext
│
▼
Hit Testing (命中测试)
│ 从根节点向下查找命中坐标的 FrameNode
▼
FrameNode::OnTouchEvent()
│
▼
Pattern::OnTouchEvent()
│
▼
GestureRecognizer 识别器
├── TapRecognizer (点击)
├── PanRecognizer (拖拽)
├── LongPressRecognizer(长按)
└── PinchRecognizer (捏合)
事件传播机制
| 阶段 | 方向 | 说明 |
|---|---|---|
| Capture (捕获) | 父 → 子 | 事件从根节点逐层向下传递，沿途可拦截 |
| Target (目标) | 命中节点 | 事件在 HitTest 命中的节点上处理 |
| Bubble (冒泡) | 子 → 父 | 处理完后向上冒泡，父节点可继续响应 |
关键文件
| 文件 | 作用 |
|---|---|
core/pipeline_ng/pipeline_context.cpp |
事件入口分发 |
core/gestures/gesture_recognizer.h |
手势识别器基类 |
core/gestures/tap_gesture.h |
点击手势 |
core/gestures/pan_recognizer.h |
拖拽识别器 |
core/components_ng/base/frame_node.h |
FrameNode 事件处理入口 |
八、数据流总结
用户操作 (点击图标)
│
▼
JS 层: router.push(url)
│
▼
FrontendDelegateDeclarative
│
▼
PageRouterManager.Push()
│
├─► JsAcePage::BuildPage() → 构建 FrameNode 树
│
▼
StageManager.PushPage()
│
▼
PipelineContext 请求 Vsync
│
▼
下一帧: Measure → Layout → Paint
│
▼
屏幕显示新页面
浙公网安备 33010602011771号