1# 图形UI组件<a name="ZH-CN_TOPIC_0000001123180295"></a> 2 3- [简介](#section11660541593) 4- [目录](#section161941989596) 5- [约束](#section119744591305) 6- [编译构建](#section137768191623) 7- [说明](#section1312121216216) 8 - [组件说明](#section66002422015) 9 - [使用说明](#section129654513264) 10 11- [相关仓](#section1371113476307) 12 13## 简介<a name="section11660541593"></a> 14 15图形UI组件实现了一套系统级的图形引擎。 16 17该组件为应用开发提供UIKit接口，包括了动画、布局、图形转换、事件处理，以及丰富的UI组件。 18 19组件内部直接调用HAL接口，或者使用WMS\(Window Manager Service\)提供的客户端与硬件交互，以完成事件响应、图像绘制等操作。 20 21**图 1** 图形子系统架构图<a name="fig1358754417214"></a> 22 23 24## 目录<a name="section161941989596"></a> 25 26``` 27/foundation/graphic/ui 28├── frameworks # 框架代码 29│ ├── animator # 动画模块 30│ ├── common # 公共模块 31│ ├── components # 组件 32│ ├── core # ui主流程（渲染、任务管理等） 33│ ├── default_resource 34│ ├── dfx # 维测功能 35│ ├── dock # 驱动适配层 36│ │ └── ohos # ohos平台适配 37│ ├── draw # 绘制逻辑 38│ ├── engines # 绘制引擎 39│ │ ├── dfb 40│ │ ├── general 41│ │ ├── gpu_vglite 42│ │ └── software_zlite 43│ ├── events # 事件 44│ ├── font # 字体 45│ ├── imgdecode # 图片管理 46│ ├── layout # 页面布局 47│ ├── themes # 主题管理 48│ ├── window # 窗口管理适配层 49│ └── window_manager 50│ └── dfb 51├── interfaces # 接口 52│ ├── innerkits # 模块间接口 53│ │ └── xxx # 子模块的接口 54│ └── kits # 对外接口 55│ └── xxx # 子模块的接口 56├── test # 测试代码 57│ ├── framework 58│ │ ├── include # 测试框架头文件 59│ │ └── src # 测试框架源码 60│ ├── uitest # 显示效果测试(可执行程序在foundation/graphic/wms/test:sample_ui) 61│ │ └── test_xxx # 具体UI组件效果测试 62│ └── unittest # 单元测试 63│ └── xxx # 具体UI组件单元测试 64└── tools # 测试和模拟器工具（模拟器工程、资源文件） 65 └── qt # QT工程 66``` 67 68## 约束<a name="section119744591305"></a> 69 70平台约束 71 72- Windows平台仅支持QT和OHOS IDE。 73- 其他平台支持情况参考vendor/hisilicon/\[product\_name\]/config.json中的graphic标签（不存在graphic标签即该产品不存在图形子系统）。 74 75## 编译构建<a name="section137768191623"></a> 76 77``` 78# 通过gn编译，在out目录下对应产品的文件夹中生成图形库 79hb build -T //foundation/graphic/ui:lite_ui -f # 编译libui.so 80hb build -T //foundation/graphic/wms/test:sample_ui -f # 编译UI用例 81hb build -T //foundation/graphic/ui/test/unittest:lite_graphic_ui_test -f # 编译TDD用例 82 83# 编译qt库可直接参考qt模拟器工程：graphic/ui/tools/qt/simulator/simulator.pro 84``` 85 86## 说明<a name="section1312121216216"></a> 87 88### 组件说明<a name="section66002422015"></a> 89 90组件分为基础组件和容器组件 91 92- 基础组件：仅实现组件自身单一功能，比如按钮、文字、图片等； 93- 容器组件：可将其他组件作为自己的子组件，通过组合实现复杂功能。 94 95**图 2** 图形组件一览<a name="fig1594213196218"></a> 96 97 98### 使用说明<a name="section129654513264"></a> 99 100foundation/graphic/ui/test/uitest中提供了图形所有组件和功能接口的使用范例。 101 102- Windows环境可运行QT工程调试，详见[使用说明](https://gitee.com/openharmony/ace_engine_lite/tree/master/frameworks/tools/qt/simulator) 103 104 工程文件路径： 105 106 ``` 107 graphic/ui/tools/qt/simulator/simulator.pro 108 ``` 109 110- 其他调试环境可以编译运行foundation/graphic/wms/test:sample\_ui 111 112 编译成功后得到可执行程序out/\[product\_name\]/dev\_tools/bin/sample\_ui，在实际环境上运行即可观察对应组件显示效果。 113 114 115## 相关仓<a name="section1371113476307"></a> 116 117[图形子系统](https://gitee.com/openharmony/docs/blob/master/zh-cn/readme/%E5%9B%BE%E5%BD%A2%E5%AD%90%E7%B3%BB%E7%BB%9F.md) 118 119[graphic_wms](https://gitee.com/openharmony/graphic_wms/blob/master/README_zh.md) 120 121[graphic_surface](https://gitee.com/openharmony/graphic_surface/blob/master/README_zh.md) 122 123**graphic_ui** 124 125[graphic_utils](https://gitee.com/openharmony/graphic_utils/blob/master/README_zh.md)