聊一聊关于鸿蒙系统的图形UI组件

微生香岚

发布于 2021-9-3 16:38

浏览

0收藏

简介

图形UI组件实现了一套系统级的图形引擎。

该组件为应用开发提供UIKit接口，包括了动画、布局、图形转换、事件处理，以及丰富的UI组件。

组件内部直接调用HAL接口，或者使用WMS(Window Manager Service)提供的客户端与硬件交互，以完成事件响应、图像绘制等操作。

图 1 图形子系统架构图
聊一聊关于鸿蒙系统的图形UI组件-鸿蒙开发者社区

/foundation/graphic/ui
├── frameworks                  # 框架代码
│   ├── animator                # 动画模块
│   ├── common                  # 公共模块
│   ├── components              # 组件
│   ├── core                    # ui主流程（渲染、任务管理等）
│   ├── default_resource
│   ├── dfx                     # 维测功能
│   ├── dock                    # 驱动适配层
│   │   └── ohos                # ohos平台适配
│   ├── draw                    # 绘制逻辑
│   ├── engines                 # 绘制引擎
│   │   ├── dfb
│   │   ├── general
│   │   ├── gpu_vglite
│   │   └── software_zlite
│   ├── events                  # 事件
│   ├── font                    # 字体
│   ├── imgdecode               # 图片管理
│   ├── layout                  # 页面布局
│   ├── themes                  # 主题管理
│   ├── window                  # 窗口管理适配层
│   └── window_manager
│       └── dfb
├── interfaces                  # 接口
│   ├── innerkits               # 模块间接口
│   │   └── xxx                 # 子模块的接口
│   └── kits                    # 对外接口
│       └── xxx                 # 子模块的接口
├── test                        # 测试代码
│   ├── framework
│   │   ├── include             # 测试框架头文件
│   │   └── src                 # 测试框架源码
│   ├── uitest                  # 显示效果测试(可执行程序在foundation/graphic/wms/test:sample_ui)
│   │   └── test_xxx            # 具体UI组件效果测试
│   └── unittest                # 单元测试
│       └── xxx                 # 具体UI组件单元测试
└── tools                       # 测试和模拟器工具（模拟器工程、资源文件）
    └── qt                      # QT工程
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.

约束

平台约束

Windows平台仅支持QT和OHOS IDE。
其他平台支持情况参考vendor/hisilicon/[product_name]/config.json中的graphic标签（不存在graphic标签即该产品不存在图形子系统）。

编译构建

# 通过gn编译，在out目录下对应产品的文件夹中生成图形库
hb build -T //foundation/graphic/ui:lite_ui -f  # 编译libui.so
hb build -T //foundation/graphic/wms/test:sample_ui -f # 编译UI用例
hb build -T //foundation/graphic/ui/test/unittest:lite_graphic_ui_test -f # 编译TDD用例

# 编译qt库可直接参考qt模拟器工程：graphic/ui/tools/qt/simulator/simulator.pro
1.
2.
3.
4.
5.
6.

说明

组件说明

组件分为基础组件和容器组件

基础组件：仅实现组件自身单一功能，比如按钮、文字、图片等；
容器组件：可将其他组件作为自己的子组件，通过组合实现复杂功能。

图 2 图形组件一览
聊一聊关于鸿蒙系统的图形UI组件-鸿蒙开发者社区

使用说明

foundation/graphic/ui/test/uitest中提供了图形所有组件和功能接口的使用范例。

Windows环境可运行QT工程调试，详见使用说明

工程文件路径：
```
graphic/ui/tools/qt/simulator/simulator.pro
1.
```
其他调试环境可以编译运行foundation/graphic/wms/test:sample_ui

编译成功后得到可执行程序out/[product_name]/dev_tools/bin/sample_ui，在实际环境上运行即可观察对应组件显示效果。