范围:框架修改与内部行为排查。文档按依赖顺序排列,依次为概述与元素系统、布局与交互、设计决策与实现模式。
文档导航
| 文档 | 内容 | 适合 |
|---|---|---|
| 项目概述 | 项目定位、核心特性、源码结构 | 所有读者 |
| 元素系统 | Element 基类、自界定泛型、pressFlags | 所有读者 |
| 布局系统 | 惰性布局、坐标系统、OverflowMode、容器 | 所有读者 |
| 交互引擎 | InteractionManager、H0/H1/L1/H3/L3 碰撞检测、分发优先级 | 深入理解输入 |
| 覆盖层系统 | OverlayTree 多根森林、OverlayManager、模态语义 | 深入理解浮动元素 |
| 生命周期系统 | UiTickDriver 固定步长、TickWalker 统一遍历、Element.tick | 改每帧状态驱动 |
| 测试源集 | testmod 自建源集、classpath-groups、DevGallery 页 | 添加组件后手工核对 |
| 根树与层级系统 | 所有权模型、渲染/输入流水线 | 理解整体架构 |
| 动画系统 | Animator、缓动函数 | 添加动画效果 |
| 工具类 | Colors、UIRenderUtil、TextDrawUtil | 颜色操作 |
| 自绘扩展 | VertexPainter、CustomElementRenderState、CustomDrawUtil、GradientPainter | 画 fill 与 text 之外的东西 |
| 关键设计决策 | 7 项核心设计决策及其理由 | 架构评审 |
| 如何使用 | 快速上手、组件示例、布局示例 | 快速入门 |
| 常见实现模式 | 添加组件、自定义布局、扩展碰撞检测 | 扩展框架 |
| 常见问题 | 内部实现原理、设计选择 | 疑难解答 |
核心架构概览
Screen(单一所有者)
├── root: LayoutElement # 元素树
├── overlays: OverlayManager # 覆盖层系统
└── interactionManager: InteractionManager # 交互管理器
数据流:
用户输入 → Screen 转发 → InteractionManager 路由
↓
覆盖层分发 → 根元素树
渲染: Tooltip.cursor → root.extractRenderState → overlays.renderOverlay
核心包(均位于 xianfish.fluentui.client.ui 下):
| 包 | 用途 |
|---|---|
element | 基类: Element, LayoutElement, TooltippingElement, FocusableElement, Focusable, KeyboardReceiver, Margin |
element/layout | 布局容器: StackPanel, Canvas, EntryRow + 枚举 |
interaction | InteractionManager, Hit |
overlay | OverlayManager, OverlayTree |
tick | UiTickDriver, TickWalker |
component | 15 个 UI 组件 |
animation | Animator, Easing |
util | Colors, UIRenderUtil, TextDrawUtil |
render | VertexPainter, CustomElementRenderState, CustomDrawUtil, GradientPainter |