1. 简介

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

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

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

1.1 自定义控件的目录结构

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

图1.1 number_label

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

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

1.2 自定义控件的描述文件

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

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

以上信息均可在 Designer 创建自定义控件时填写，例如，awtk-widget-number-label/project.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.",
  ......
}