Skip to content

1. 简介

AWTK 中内置了丰富的基础控件(比如 button、label、edit等)和扩展控件(gif、gauge、rich_text等),开发者通过组合这些控件可以快速构建复杂的 GUI 界面,但当 AWTK 内置的这些控件无法满足更复杂的应用场景时,我们还可以通过开发自定义控件来实现这些功能。

AWTK 提供了非常便利的实现框架,只需定义好控件的结构类型并编写几个重载函数即可。本文将介绍 AWTK 自定义控件的规范,以及通过 AWTK Designer(下面简称Designer)创建、导入并使用的自定义控件的步骤,帮助用户深入了解并开发属于自己的自定义控件。

AWTK Designer 是专门用来制作 AWTK 应用程序 UI 界面的实用工具,只要通过拖拽和点击就可以完成复杂的界面设计。

1.1 自定义控件的目录结构

本文主要以显示数值的文本控件 number_label 为例,该控件可以在 Designer 中直接安装,如下图所示,也可以前往 JihuLab 下载,比如此处下载 awtk-widget-number-label

下载完成后,可以打包资源并编译示例程序,查看自定义控件的示例效果,具体步骤可以参考控件目录下的 README.md 文档,自定义控件目录结构如下表所示:

目录/文件夹说明备注
bin存放动态库和可执行文件编译后生成
demos存放示例程序的源代码
design存放示例程序的原始资源,可在 Designer 上编辑
docs存放相关说明文档
idl存放生成的 IDL 文件
lib存放静态库动态库编译后生成
res存放示例程序运行时需要的资源打包资源后生成
scripts存放打包资源的脚本
src存放自定义控件的源代码
tests存放单元测试源代码
LICENSE许可证
project.json项目描述文件,包含项目设置等信息
README.md说明文档
SConstructSCons编译脚本

1.2 自定义控件的描述文件

在上一小节介绍的自定义控件目录中,project.json 文件包含了控件的基本描述信息,详见下表:

参数说明
name控件的类型名,全小写英文字母,单词之间用下划线连接
version版本号
date创建日期
team开发团队名称
author作者联系方式
desc控件的功能描述
copyright版权声明

以上信息均可在 Designer 创建自定义控件时填写,例如,awtk-widget-number-label/project.json 文件中包含的信息如下:

json
{
  "name": "number_label",
  "version": "1.0.0",
  "date": "2020-05-31",
  "team": "AWTK Develop Team",
  "author": "Li XianJing <xianjimli@hotmail.com>",
  "desc": "用于显示数值的文本控件。",
  "copyright": "Guangzhou ZHIYUAN Electronics Co.,Ltd.",
  ......
}