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/arkui/ui_lite 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│ ├── events # 事件 40│ ├── font # 字体 41│ ├── imgdecode # 图片管理 42│ ├── layout # 页面布局 43│ ├── themes # 主题管理 44│ ├── window # 窗口管理适配层 45│ └── window_manager 46│ └── dfb 47├── interfaces # 接口 48│ ├── innerkits # 模块间接口 49│ │ └── xxx # 子模块的接口 50│ └── kits # 对外接口 51│ └── xxx # 子模块的接口 52├── test # 测试代码 53│ ├── framework 54│ │ ├── include # 测试框架头文件 55│ │ └── src # 测试框架源码 56│ ├── uitest # 显示效果测试(可执行程序在foundation/window/window_manager_lite/test:sample_ui) 57│ │ └── test_xxx # 具体UI组件效果测试 58│ └── unittest # 单元测试 59│ └── xxx # 具体UI组件单元测试 60└── tools # 测试和模拟器工具（模拟器工程、资源文件） 61 └── qt # QT工程 62``` 63 64## 约束<a name="section119744591305"></a> 65 66平台约束 67 68- Windows平台仅支持QT和OHOS IDE。 69- 其他平台支持情况参考vendor/hisilicon/\[product\_name\]/config.json中的graphic标签（不存在graphic标签即该产品不存在图形子系统）。 70 71## 编译构建<a name="section137768191623"></a> 72 73``` 74# 通过gn编译，在out目录下对应产品的文件夹中生成图形库 75hb build -T //foundation/arkui/ui_lite:ui_lite -f # 编译libui.so 76hb build -T //foundation/window/window_manager_lite/test:sample_ui -f # 编译UI用例 77hb build -T //foundation/arkui/ui_lite/test/unittest:arkui_ui_lite_test -f # 编译TDD用例 78 79# 编译qt库可直接参考qt模拟器工程：arkui/ui_lite/tools/qt/simulator/simulator.pro 80``` 81 82## 说明<a name="section1312121216216"></a> 83 84### 组件说明<a name="section66002422015"></a> 85 86组件分为基础组件和容器组件 87 88- 基础组件：仅实现组件自身单一功能，比如按钮、文字、图片等； 89- 容器组件：可将其他组件作为自己的子组件，通过组合实现复杂功能。 90 91**图 2** 图形组件一览<a name="fig1594213196218"></a> 92 93 94### 使用说明<a name="section129654513264"></a> 95 96foundation/arkui/ui_lite/test/uitest中提供了图形所有组件和功能接口的使用范例。 97 98- Windows环境可运行QT工程调试，详见[加入指引](https://gitee.com/openharmony/arkui_ui_lite/wikis/%E5%BF%AB%E9%80%9F%E5%8A%A0%E5%85%A5/%E5%8A%A0%E5%85%A5%E6%8C%87%E5%BC%95) 99 100 工程文件路径： 101 102 ``` 103 arkui/ui_lite/tools/qt/simulator/simulator.pro 104 ``` 105 106- 其他调试环境可以编译运行foundation/window/window_manager_lite/test:sample\_ui 107 108 编译成功后得到可执行程序out/\[product\_name\]/dev\_tools/bin/sample\_ui，在实际环境上运行即可观察对应组件显示效果。 109 110 111## 相关仓<a name="section1371113476307"></a> 112 113[图形子系统](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) 114 115[window_window_manager_lite](https://gitee.com/openharmony/window_window_manager_lite/blob/master/README.md) 116 117[graphic_surface_lite](https://gitee.com/openharmony/graphic_surface_lite/blob/master/README.md) 118 119**arkui_ui_lite** 120 121[graphic_graphic_utils_lite](https://gitee.com/openharmony/graphic_graphic_utils_lite/blob/master/README.md)