# 2. 界面操作与说明
下面详细介绍如何使用Designer。
Designer需要登录并激活许可后才能正常使用。关于许可的更多信息，请参阅本文第三章。这里假定Designer已激活许可。
# 2.1 新建/打开项目
Designer以项目的形式来管理各类文件，因此，第一步先新建或打开一个项目。
# 2.1.1 新建项目
Designer目前支持2种类型的项目，具体如下：
- 常规项目：基于AWTK的GUI应用程序，可以使用XML描述UI、C语言实现逻辑，可以通过AWTK API直接访问Widget。
- 自定义控件：基于AWTK的自定义控件库，导入AWTK Designer后可以像内置控件一样编辑和实时预览显示效果。
# 1. 新建常规项目
Designer启动后默认打开"新建项目"对话框，如下图所示。设置好项目的相关参数后，点击"创建"按钮即可创建一个常规项目。
点击主界面工具栏的"新建项目"按钮，也可打开"新建项目"对话框。
需要设置的参数如下：
(1) 项目设置：包括项目名称和项目路径。
(2) 运行设置：
- 启动页面名称：应用程序启动时显示的第一个页面的名称。
- 默认语言：应用程序默认使用的语言。。
- 默认国家：应用程序默认使用的语言所属的国家或地区。
- AWTK路径：项目依赖的AWTK的路径，默认为"${AWTK_SDK_PATH}/awtk"，表示Designer安装目录中的SDK/awtk目录。
(3) LCD设置：
- 宽度：LCD的宽度。
- 高度：LCD的高度。
- 颜色深度:LCD的颜色深度，选项有 1bit、16bit、32bit。
- 颜色格式:LCD的颜色格式，选项有 MONO、RGB(A)、BGR(A)。
- LCD的颜色深度和颜色格式决定了LCD Frame Buffer的格式：
- 颜色深度为1bit时，颜色格式固定为MONO，表示Frame Buffer为MONO；
- 颜色深度为16bit且颜色格式为RGB(A)，表示Frame Buffer为RGB565；
- 颜色深度为32bit且颜色格式为RGB(A)，表示Frame Buffer为RGB8888；
- 颜色深度为16bit且颜色格式为BGR(A)，表示Frame Buffer为BGR565；
- 颜色深度为32bit且颜色格式为BGR(A)，表示Frame Buffer为BGR8888。
(4) 资源设置：
- 资源的打包方式，有2个选项：
- 文件+常量：表示同时生成用于文件系统的资源和可直接编译到代码中的常量资源（以常量数组的形式存在）；
- 仅文件：表示仅生成用于文件系统的资源。
- 资源的常量格式，它影响字体、图片打包生成的常量资源的格式。有2种格式：
- 原始数据：表示数组中缓存的是原始的文件数据（比如，PNG图片的原始数据为PNG数据）；
- 位图数据：表示数组中缓存的是Bitmap数据。
(5) 插件设置：点击"插件设置"下方的预览图，可以进入的"选择插件"对话框，可以设置项目使用的插件。
需要注意的是：LCD Frame Buffer的格式决定了打包生成的字体位图数据（也就是字模数据）和图片位图数据的格式。
对于字体：
- Frame Buffer为MONO时，字模的alpha通道为1bit；否则为8bit。
对于图片：
- Frame Buffer为MONO时，无论图片的颜色通道是什么格式，统一转为1bit；原颜色灰度>10时为1（表示白色），否则为0（表黑色）。
- Frame Buffer为565格式时，没有alpha通道的图片会转为565格式的位图数据，但有alpha通道的图片则仍会转为8888格式的图数据（运行时经过半透混合会转成565格式）；
- Frame Buffer为8888格式时，则全部转为8888格式的位图数据。
另外，对于控件样式（比如背景颜色、文本颜色等）有一点需要注意：由于运行时计算灰度影响效率，Frame Buffer为MONO时，AWTK认为颜色的R通道为0时表示黑色，否则为白色；因此，建议MONO模式下，样式里的颜色均显式地设为黑色或白色。
# 2. 新建自定义控件项目
点击"新建项目"对话框中的"自定义控件"标签，如下图所示。设置好项目的相关参数后，点击"创建"按钮即可创建一个自定义控件项目。
打开该类型的项目时，Designer会自动加载该控件库中的控件到控件列表。
需要设置的参数如下：
(1) 项目设置：包括项目名称和项目路径，其中项目名称为控件库的名称，须为全小写英文字母，单词之间用下划线连接。
(2) 基本信息：
- 版本：控件库的版本号。
- 功能描述：控件库功能的概要描述。
- 团队名称：控件库的开发团队的名称。
- 作者：控件库的作者及联系方式。
- 版权声明：控件库的版权声明。
- AWTK路径：控件库依赖的AWTK的路径，默认为"${AWTK_SDK_PATH}/awtk"；AWTK_SDK_PATH表示Designer安装目录中SDK目录。
(3) 属性信息：
- 名称：属性名称，须为全小写英文字母，单词之间用下划线连接。
- 类型：属性类型。
- 初始值：属性的初始值。
- 描述：属性的功能描述。
# 3. 插件设置
插件指的是可以在项目中复用的组件。目前Designer支持以下3种插件：
- 主题：也就是皮肤，由一个或多个描述控件外观（比如背景颜色、边框颜色、文本颜色、背景图片等）的样式文件组成。默认安装到项目主题目录的styles目录、images目录。
- UI片段：指已设计好的可在项目中直接使用的UI，比如软键盘、系统栏等。默认安装到项目主题目录的ui目录。
- 自定义控件：指AWTK内置控件之外的其他任意控件。默认安装到项目的3rd/widgets目录。
- 对于同一类型的插件，插件的name是唯一的。导入Designer时，会对插件进行唯一性校验。
- 关于主题目录的更多信息，请参阅本文2.1.3章节。如何使用自定义控件类型，请参考本文5.1章节。
在Designer左侧点击插件管理可以进入插件管理栏
- 安装：点击“安装”按钮，可以将已存在的插件导入到Designer中以便复用。
- 更多操作：点击“更多”按钮，可以弹出菜单，比如删除本地插件、在资源管理器显示（即打开本地文件夹）重新加载控件等。
- 应用：对于自定义控件之外的插件有效。点击会弹出项目当前的主题列表，可以选择将插件应用到指定的主题。
需要注意：
- 应用到主题时如果没有指定主题，在插件右上角会显示黄色警告标志，鼠标悬停在警告标志上方时会提示"该插件实际不会添加到项目中"；
- 主题类型的插件会覆盖指定主题目录中的同名文件，因此注意备份design目录；
- 软键盘、系统栏插件会替换项目正在使用的软键盘、系统栏，因此注意备份design目录；其他类型的UI片段插件如果遇到同名文件会自动重命名。
# 2.1.2 打开项目
在"新建项目"对话框上，有两种方式可以打开已存在的项目：
- 双击“新建项目”对话框中的"最近的项目"列表中的一项，即可打开项目；
- 点击“新建项目”对话框中的"最近的项目"下方的"文件夹"按钮，可以打开下图所示的"打开项目"对话框。选中项目描述文件project.json后，点击"打开"按钮即可打开项目。
点击主界面工具栏的"打开项目"按钮，也可打开"打开项目"对话框。
# 2.1.3 项目的目录结构
默认情况下，项目的目录结构如下表所示：
| 项目 | 说明 |
|---|---|
| bin | 存放可执行文件。 |
| demos | 存放Demo的源代码，仅自定义控件库项目会自动创建。 |
| design | 存放项目的原始资源，可在Designer上编辑。 |
| res | 存放项目运行时需要的资源，由 Designer 打包或者scripts/update_res.py脚本生成。 |
| scripts | 存放打包资源的脚本。 |
| src | 存放项目源码。 |
| project.json | 项目的描述文件，包含项目设置等信息。 |
| SConstruct | Scons编译脚本。 |
项目创建后，design目录默认有一个名称为"default"的主题目录。主题的目录结构如下表所示：
| 项目 | 说明 |
|---|---|
| fonts | 存放该主题使用的字体，内涵子目录详见下文。 |
| images | 存放该主题使用的图片，内涵子目录详见下文。 |
| strings | 存放该主题使用的语言文件。 |
| styles | 存放该主题使用的样式文件。 |
| ui | 存放该主题使用的UI文件。 |
| data | 存放字体、图片、语言、样式、UI、XML、脚本之外的文件。 |
(1) fonts 目录中包含以下子目录：
- config：临时目录，存放记录字体的保留字符的文件；
- origin：临时目录，存放被裁剪的TTF的原始文件。
(2) images 目录中包含以下子目录：
- xx：存放与屏幕密度无关的图片；
- x1：存放普通密度屏幕上使用的图片；
- x2：存放2倍密度屏幕上使用的图片；
- x3：存放3倍密度屏幕上使用的图片；
- svg：存放svg图片。
AWTK运行时会优先在 x1、x2、x3 目录中的其中一个查找图片（比如LCD的DPR=1，则在x1目录），如果找不到，则在xx目录中查找。
设备像素比（DPR）=设备像素（又称物理像素）/设备独立像素（又称密度无关像素或逻辑像素，可以认为是计算机坐标系统中的一个点，代表一个可以由程序使用的虚拟像素），比如DPR=2，则表示1逻辑像素等于2物理像素。
项目的src目录结构，如下表所示：
| 项目 | 说明 |
|---|---|
| SConscript | 用于管理src目录下的源代码。 |
| main.c | 应用程序的main文件，包含main函数。 |
| application.c | Application实例的代码文件，可添加应用程序的初始化和退出时的逻辑。 |
| pages | 存放窗体对应的C代码，与ui目录的结构一致。 |
# 2.2 主界面
新建/打开项目后，Designer会进入主界面并默认打开启动页面。主界面可分为如下图所示的若干个区域，下面分别对各个区域进行详细介绍。
# 2.3 工具栏
工具栏由一系列常用操作的按钮组成，可以分为三大类。
# 2.3.1 项目操作
工具栏上提供的项目操作如下：
- 新建项目：点击“新建项目”按钮，可以弹出“新建/打开项目”对话框。
- 打开项目：点击“打开项目”按钮，可以弹出“打开项目”对话框。
- 保存：点击“保存”按钮，可以保存当前正在编辑的文件。
- 保存所有：点击“全部保存”按钮，可以保存已打开的全部文件。
- 翻译：点击“翻译”按钮，可以启动多国语言翻译，Designer将自动检索UI文件中需要翻译的文本，并更新到语言文件（strings.xml）。
- 打包：点击“打包”按钮，可以将design目录下的原始资源转换为AWTK应用程序运行时需要的格式，并输出到指定目录（默认为res目录）。
- 编译：点击“编译”按钮，可以打开终端并调用Scons命令编译源代码，如果编译成功，则会在bin目录生成可执行文件。
- 模拟运行：点击“模拟运行”按钮，可以运行编译生成的可执行文件（bin/demo.exe）。
# 1. 打包
如果项目未打包或design目录下的原始资源发生修改，可以点击"打包"按钮进行打包，设置参数详见2.4.1章节。
假设项目有两个主题（default、dark），打包后的结果如下图所示。
Designer默认以多主题的方式使用生成的资源，也就是在app_main.c中默认引用assets.inc，代码如下。如果需要在运行时切换主题，则只需调用assets.inc中提供的assets_set_global_theme()即可。
// app_main.c
/***************************************************************/
/*** THIS FILE IS GENERATED BY AWTK DESIGNER, DO NOT MODIFY ****/
/***************************************************************/
#include "awtk.h"
#include "../res/assets.inc"
extern ret_t application_init(void);
extern ret_t application_exit(void);
#include "awtk_main.inc"
如果目标平台不支持文件系统且内存资源等有限，可以选择仅使用单个主题，比如仅使用dark主题，则修改app_main.c中的#include "../res/assets.inc" 为 #include "../res/assets_dark.inc"即可。
# 2. 编译
点击"编译"按钮，可以打开终端并调用Scons命令编译源代码，如果编译成功，则会在bin目录生成可执行文件。
这里假定已经安装好编译环境。如果未安装，请参阅《AWTK 开发实践》中的1.4章节。
编译前需要注意，要使编译正常有2个前提条件：
- 需要先打包资源
如果编译前资源未打包，会出现两个问题：一个是找不到资源文件会导致编译失败，对于这种情况Designer会有如下图所示的提示；另一个是资源没有更新会导致运行时显示结果与实际不符。
- 依赖的AWTK必须存在且已编译
如果检查到AWTK未编译，Designer会有如下图所示的提示。此时，点击"是"按钮，可以打开终端并开始编译AWTK。编译成功后，再点击"编译按钮"重新项目。
推荐使用安装Designer时附带的AWTK。但如果需要使用其他版本的AWTK，可以进入项目设置修改AWTK路径。
# 2.3.2 编辑栏
工具栏上提供的窗体操作如下：
- 新建窗体：点击“新建窗体”按钮，可以弹出“新建窗体”对话框，完成设置后可新建一个窗体。
- 预览：点击“预览”按钮，可以预览当前正在编辑的窗体的运行时效果。
- 对齐：选中2个以上控件时有效，可实现多个控件的 上/下/左/右/水平/垂直居中 对齐。
- 分布：选中3个以上控件时有效，可实现多个控件的 垂直/水平、靠上/下/左/右/居中 的均匀分布。
- 顺序：修改控件在Z方向上的层次顺序，可移动控件层级，将其 置于顶层/底层 或者 上移/下移一层。
# 1. 新建窗体
点击工具栏上的"新建窗体"按钮，可以打开"新建窗体"对话框。设置好窗体类型、名称、路径后点击"创建"即可新建窗口。
Designer目前支持的窗体类型如下：
- Window：缺省窗口，占据除SystemBar之外的整个区域，大小和位置不可以设置。
- Dialog：对话框，大小和位置可自由设置，可以是模态的，也可以是非模态的。
- Popup：弹出窗口，大小和位置可自由设置，主要用来实现右键菜单和下拉列表。
- Overlay：悬浮窗口，大小和位置可自由设置，同时不阻止窗口外的事件向下传递。
- Component：可复用的UI组件，比如作为tab_button控件的load_ui属性实现动态加载。
- SystemBar：顶部系统栏，独占LCD顶部区域，用来显示当前窗口的标题、关闭按钮等；一个应用只有一个，需在打开应用的第一个窗口之前打开。
- SystemBarBottom：底部系统栏，独占LCD底部区域，用来显示状态信息等；一个应用只有一个，需在打开应用的第一个窗口之前打开。
- Keyboard：软键盘，由编辑控件通过输入法自动打开和关闭。
如果编辑控件设置了keyboard属性，则使用该属性值作为键盘的UI文件名。如果未设置，则使用input_type属性对应的UI文件名。input_type属性与UI文件的对应关系如下：
- phone 对应 kb_phone.xml；
- int 对应 kb_int.xml；
- uint、ipv4、date、time、time_full 对应 kb_uint.xml；
- float 对应 kb_float.xml；
- ufloat 对应 kb_ufloat.xml；
- hex 对应 kb_hex.xml；
- email、password 对应 kb_ascii.xml；
- custom、custom_password 表示使用自定义键盘；
- 其他对应 kb_default.xml。
对于常规项目，新建窗体成功后会自动在src/pages目录创建窗体对应的C代码文件；
# 2. 窗体预览
当鼠标悬浮在"预览"按钮上方时会显示当前预览的模式；点击图标下方的"预览"文本，可以选择预览模式；点击预览图标，可以预览正在编辑的窗体，如下图所示。
Designer目前支持的预览模式如下：
- AGGE-BGR565：表示运行时绘图使用AGGE引擎，LCD Frame Buffer的格式为BGR565。
- AGGE-BGRA8888：表示运行时绘图使用AGGE引擎，LCD Frame Buffer的格式为BGRA8888。
- AGGE-MONO：表示运行时绘图使用AGGE引擎，LCD Frame Buffer的格式为MONO。
- OpenGL：表示运行时绘图使用OpenGL引擎。
# 3. 对齐的参考控件
参考控件指的是对齐时的基准控件。如下图所示，参考控件为edit控件，点击"左对齐"时则会edit控件的左边缘为基准进行对齐。
如果需要修改参考控件，则单击被选中的其他控件即可。
# 2.3.3 查看栏
工具栏上提供的查看操作如下：
- 全局样式：点击“全局样式”按钮，可以查看“全局样式”列表。
- APP对象：点击“APP对象”按钮，可以查看
application.c的代码文件。 - 终端：点击“终端”按钮，可以弹出“调试终端”框
# 1. 全局样式
在全局样式列表可以查看控件的默认样式，也可以在此处进行添加或者修改，保存后会直接修改design/default/styles/default.xml文件中的对应属性。
# 2. APP对象
在APP对象中可以查看当前项目的application.c文件
# 3. 终端
点击”终端“按钮会弹出可用于调试应用的终端栏，点击”模拟运行“按钮时也会自动弹出。
# 2.4 导航栏
导航栏主要用于窗口导航，目前有三个按钮，功能如下：
- "编辑"按钮：点击切换至编辑功能页面，目前只有编辑功能。
- "插件管理"按钮：点击切换至插件管理页面。
- "设置"按钮：点击可以打开设置菜单，可以选择通用设置、项目设置。
# 2.4.1 通用设置
点击导航栏的"设置"按钮，之后点击"通用设置"，可以打开"通用设置"对话框。通用设置可分为"环境设置"与"文件设置"。
# 4. 环境设置
环境设置页面如下图所示。
环境设置页面可以设置的参数如下：
- 语言：Designer所显示的语言，有如下选项：简体中文、English。
- 主题：Designer所显示的主题，有如下选项：Dark。
- UI页面布局类型：Designer主页面的UI布局。
- 代码编辑器字体大小：Designer代码编辑器字体的大小。
# 5. 文件设置
文件设置主要包括使用Designer编辑文件过程中的相关设置，如下图所示。
文件设置页面可以设置的参数如下：
- 自动保存发生修改的文件：文件发生需改后是否自动保存。自动保存的延迟时间以毫秒为单位。
- 删除UI文件时同时删除default主题的同名UI文件：删除UI文件后是否自动删除default主题中的同名UI文件。
- 删除公共的自定义控件时同时删除本地文件：删除公共的自定义控件时是否同时删除本地文件。
- 删除项目中的主题时同时删除本地文件：删除项目中的主题时是否同时删除本地文件。
- 添加或删除项目中的自定义控件时自动重载已打开的UI文件：添加或删除项目中的自定义控件时是否自动重载已打开的UI文件。
# 2.4.2 项目设置
点击导航栏的"设置"按钮，之后点击"项目设置"，可以打开"项目设置"对话框。项目设置可分为"常规设置"和"主题设置"。
# 1. 常规设置
常规设置主要包括运行设置和资源打包设置，如下图所示。
常规设置可以设置的参数如下：
(1) 运行设置：
- 启动页面名称：应用程序启动时显示的第一个页面的名称。
- 默认语言：应用程序默认使用的语言。
- 默认国家：应用程序默认使用的语言所属的国家或地区。
- AWTK路径：项目依赖的AWTK的路径。
(2) 资源打包设置：
- 输出目录：打包生成的资源的输出目录，默认为项目的res目录。
- 资源的打包方式：
- 文件+常量：表示同时生成用于文件系统的资源和可直接编译到代码中的常量资源（以常量数组的形式存在）；
- 仅文件：表示仅生成用于文件系统的资源。
- 资源的常量格式：
- 原始数据：表示数组中缓存的是原始的文件数据（比如，PNG图片的原始数据为PNG数据）；
- 位图数据：表示数组中缓存的是Bitmap数据。
- LCD的设备像素比（DPR）：影响打包生成常量资源时应包含哪些图片资源。
- DPR=x1时，图片资源包含x1、xx、svg；
- DPR=x2时，图片资源包含x2、xx、svg；
- DPR=x3时，图片资源包含x3、xx、svg；
关于DPR与图片的关系，请参阅本文2.1.3章节。
(3) LCD旋转设置
- 旋转角度：改变LCD显示时的方向，可选项有：逆时针90°、逆时针180°、逆时针270°。
- 使用快速旋转模式：可以选择是否打开快速旋转模式。
# 2. 主题设置
通过"主题"选项页，可以进行以下操作：
添加主题：点击主题列表右上角的"+"按钮，可以在弹出的编辑框中设置新主题的名称；“确定”或“应用”设置后，如果design目录存在同名的子目录，则直接使用该目录为主题目录；否则新建主题目录。
重命名主题：双击主题名称，可以重命名主题；“确定”或“应用”设置后，会重命名对应的目录。
激活主题："星星"标记的主题为当前使用的主题；“确定”或“应用”设置后，窗体编辑器将按该主题的设定显示窗口的外观。
设置打包的主题："星星"标记右侧的"折叠"标记表示打包时是否生成对应的资源文件。
删除主题：点击主题列表右上角的"删除"按钮，可以删除主题；如果勾选同时删除本地文件，“确定”或“应用”设置后，会删除对应的主题目录。
搜索主题设置：在主题列表上的搜索框中输入主题的名称，可以搜索主题列表中包含该名称的主题。
编辑主题设置：点击选中主题列表中的某个主题，“LCD设置”、“系统栏设置”、“主题的字体列表”等会更新为该主题的设置，之后直接编辑即可。
(1) 主题的LCD设置
LCD设置相关的参数如下：
- 宽度：LCD的宽度。
- 高度：LCD的高度。
- 颜色深度：LCD的颜色深度，有如下选项：1bit、16bit、32bit。
- 颜色格式：LCD的颜色格式，有如下选项：MONO、RGB(A)、BGR(A)。
LCD的颜色深度和颜色格式决定了LCD Frame Buffer的格式：
- 颜色深度为1bit时，颜色格式固定为MONO，表示Frame Buffer为MONO；
- 颜色深度为16bit且颜色格式为RGB(A)，表示Frame Buffer为RGB565；
- 颜色深度为32bit且颜色格式为RGB(A)，表示Frame Buffer为RGB8888；
- 颜色深度为16bit且颜色格式为BGR(A)，表示Frame Buffer为BGR565；
- 颜色深度为32bit且颜色格式为BGR(A)，表示Frame Buffer为BGR8888。
关于LCD Frame Buffer的更多信息，请参阅本文2.1.1章节。
不同的主题可以有不同的LCD设置。比如，default主题的LCD为800*480，dark主题的LCD为320*480，则两个主题的显示效果如下图所示。
(2) 主题的系统栏设置
系统栏设置的相关参数如下：
- 顶部系统栏：UI文件相对于UI目录的路径。
- 底部系统栏：UI文件相对于UI目录的路径。
UI文件存放在主题目录的UI目录下，比如：design/default/ui。
不同的主题可以有不同的系统栏。比如，default主题下创建一个systembar（文件名为system_bar_default.xml）并设置顶部系统栏为system_bar_default，dark主题下创建一个systembar（文件名为system_bar_dark.xml）并设置顶部系统栏为system_bar_dark，则两个主题的显示效果如下图所示。
(3) 主题的字体设置
主题列表下方的"主题的字体列表"会显示当前主题使用的所有字体，"字体设置"则是选中的字体的裁剪设置。
字体设置的相关参数如下：
- 裁剪格式：用来切换裁剪格式，不作为设置的一部分。比如，裁剪格式为TTF时，则切换到TTF字体的裁剪设置；裁剪格式为Bitmap时，则切换到位图字体的裁剪设置。
- 保留的字号：表示字体裁剪后需要保留的字号，裁剪格式为Bitmap时有效；点击右侧的添加按钮可以添加字号，点击字号列表中的删除字体可以删除字号。
- 保留的字符：表示字体裁剪后需要保留的字符；当裁剪格式为TTF时，表示TTF文件内保留的字符；当裁剪格式为Bitmap时，表示对应字号要保留的字符。
不同的主题可以有不同的字体。比如，default主题的default字体为Designer创建项目时的默认字体，dark主题的default字体为华文彩云（添加到字体列表中后，在资源浏览器中重命名为default），则两个主题的显示效果如下图所示。
# 2.5 状态栏
状态栏用来显示一些信息以及提供一些快捷操作，如下：
- 当前主题：显示当前激活的主题，单击可打开"选择当前主题"对话框，可以选择激活其他主题。
- LCD尺寸：显示当前激活的主题的LCD尺寸，单击可打开"选择LCD"对话框，可以设置为其他常用的LCD尺寸。
- 消息中心：显示账户内未读消息的数量，单击可打开"消息中心"，可以查看消息详情。
# 2.6 项目管理器
新建或打开项目后，项目管理器窗口会显示项目的文件列表以及提供一些常用操作。
# 2.6.1 简洁模式
AWTK优先在当前主题中查找UI文件，如果找不到则会在default主题内查找。因此，如果当前主题中不存在一个同名的UI文件，则会显示default主题中对应的文件。
比如，项目有default、dark两个主题且当前激活的是dark主题，如果dark/ui/home_page.xml存在，则上图中的home_page指的是该文件；否则指的是default/ui/home_page.xml。
项目管理器窗口默认为简洁模式，简洁模式仅显示当前主题的所有UI文件，可以进行以下操作。
- 打开UI文件：双击UI文件，可以打开该文件进行编辑，更多信息请参阅2.11。
- 设置启动页面：点击文件右侧的"更多"按钮，再点击“设为启动页面”，可以将该文件设为项目的启动页面，启动页面的右侧有"星星"标志。
- 切换为常规模式：点击"切换"按钮，可以切换到常规模式。
- 打开右键菜单：右键点击，可以显示右键菜单，更多信息请参阅本文2.6.3章节。
# 2.6.2 常规模式
项目管理器窗口的常规模式会显示项目在磁盘上的目录结构，可以进行以下操作：
- 打开UI文件：双击主题目录中ui目录的UI文件，可以打开该文件进行编辑，更多信息请参阅2.12。
- 打开样式文件：双击主题目录中styles目录的样式文件，可以打开该文件进行编辑，更多信息请参阅2.13
- 打开语言文件：双击主题目录中strings目录的strings.xml，可以打开该文件进行编辑，更多信息请参阅2.14。
- 打开文本文件：双击项目目录中除二进制格式、UI、样式、语言文件之外的其他文件，可以打开文件并编辑。
- 切换为简洁模式：点击"切换"按钮，可以切换到简洁模式。
- 打开右键菜单：右键点击，可以显示右键菜单，更多信息请参阅2.6.3。
关于主题目录的更多信息，请参阅2.1.3。
# 2.6.3 右键菜单
右键点击项目管理器窗口的文件，会打开右键菜单。菜单选项如下表所示。
| 操作 | 快捷键 | 说明 |
|---|---|---|
| 新建窗体 | 无 | 可以打开“新建窗体”对话框，当前为ui目录时有效。 |
| 新建文件 | 无 | 新建文件到当前目录。 |
| 新建窗体 | 无 | 新建文件到当前目录。 |
| 在资源管理器中显示 | Shift + Alt + R | 打开系统的资源管理器，并定位到该文件或文件夹。 |
| 复制 | Ctrl + C | 复制文件或文件夹。 |
| 粘贴 | Ctrl + V | 粘贴文件或文件夹到当前目录，在复制文件或文件夹后有效。 |
| 复制相对路径 | Ctrl + Alt + C | 复制相对于项目目录的路径。 |
| 复制路径 | Shift + Alt + C | 复制绝对路径。 |
| 重命名 | F2 | 重命名文件或文件夹。 |
| 删除 | Delete | 删除文件或文件夹。 |
重命名或者删除主题目录时，会同步修改项目的主题设置；添加、重命名或者删除主题中的字体时，会同步修改项目中对应主题的字体设置。
# 2.7 控件列表
控件列表窗口显示AWTK的内置控件、已经安装到项目中的自定义控件。通过拖曳的方式可以把列表中的某个控件添加到窗体编辑器上。
拖曳的方式有2种：
- 点击控件（不释放鼠标），拖拽到窗体编辑器后再释放鼠标；
- 单击控件（释放鼠标），移动光标到窗体编辑器上，再次点击但不释放鼠标，拖曳直到适合的控件大小，再释放鼠标。
关于如何导入自定义控件，请参阅5.1。
# 2.8 资源浏览器
资源浏览器窗口可以显示项目当前主题正在使用的资源，并提供一些编辑资源的操作。
# 2.8.1 图片资源
点击资源浏览器窗口的"图片"按钮，可以切换到图片资源列表。列表上显示图片的概览图、名称、尺寸，通过该列表可以进行以下操作：
(1) 选择显示的主题：
- 仅显示当前主题：显示当前主题目录的图片资源；
- 仅显示default主题：显示default主题目录的图片资源；
- 显示default+当前主题：显示default +当前主题目录的图片资源。
(2) 检索未使用的资源：点击"检索"按钮，可以弹出对话框，显示UI文件、样式文件未使用的图片、字体，可以选择删除指定的图片、字体。
(3) 搜索图片：在搜索框中输入要搜索的图片的名称，列表将仅显示匹配项。
(4) 切换图片类型：点击图片类型下拉列表，可以修改要显示的图片类型。有如下选项：
- xx：仅显示与DPR无关的图片；
- x1：仅显示DPR=1时使用的图片；
- x2：仅显示DPR=2时使用的图片；
- x3：仅显示DPR=3时使用的图片；
- svg：仅显示svg图片。
(5) 查看图片类型的区别：点击"?"按钮，会弹出浏览器界面介绍不同图片类型有什么区别。
(6) 添加图片：点击"+"按钮，可以添加图片到主题的images目录中当前图片类型的目录，如果新增图片在项目中不存在，则会拷贝到项目中。
(7) 删除图片：点击"删除"按钮，可以删除图片。
(8) 替换图片：点击"替换"按钮，可以用其他图片替换当前图片，并保持文件名不变。
(9) 创建图片控件：点击图片（不释放鼠标），拖拽到窗体编辑器后释放鼠标，可以创建一个显示该图片的image控件。
# 2.8.2 字体资源
点击字体Tab按钮，可以切换到字体资源列表，列表上显示字体的概览图、名称、文件大小，通过该列表可以进行以下操作。
(1) 选择显示的主题：
- 仅显示当前主题：显示当前主题目录的字体资源；
- 仅显示default主题：显示default主题目录的字体资源；
- 显示default+当前主题：显示default +当前主题目录的字体资源。
(2) 检索未使用的资源：点击"检索"按钮，可以弹出对话框，显示UI文件、样式文件未使用的图片、字体，可以选择删除指定的图片、字体。
(3) 搜索字体：在搜索框中输入要搜索的字体的名称，列表将仅显示匹配项。
(4) 修改字体裁剪设置：点击"裁剪设置"按钮，可以打开项目设置页面修改字体的裁剪设置，更多信息请参阅2.4.2。
(5) 添加字体：点击"+"按钮，可以添加字体到主题的fonts目录，如果新增字体在项目中不存在，则会拷贝到项目中。
(6) 删除字体：点击"删除"按钮，可以删除字体。
(7) 裁剪字体的TTF文件：点击"裁剪字体"按钮，可以裁剪TTF文件，裁剪后文件将仅保留设置的字符，原字体文件将移动到origin目录；裁剪后非保留字符将无法正常显示。
(8) 还原字体：点击"还原字体"按钮，可以将已被裁剪的字体文件还原成未被裁剪的文件。
(9) 替换字体：点击"替换"按钮，可以用选定的TTF文件进行替换，但不改变名称。
# 2.9 对象浏览器
对象浏览器窗口可以显示正在编辑的UI文件的控件树，同时提供以下操作：
- 隐藏/显示控件：点击“隐藏/显示”按钮，可以设置控件是否在编辑器上可见，显示时显示眼睛图标，隐藏后在编辑器上无法选中该控件。
- 锁定/解锁控件：点击“锁定/解锁”按钮，可以锁定或者解锁控件，锁定时显示锁图标，锁定后在编辑器以及对象浏览器上无法选中该控件。
- 放到前面：点击"↑"按钮，可以使选中控件的显示位置上移一层。
- 放到后面：点击"↓"按钮，可以使选中控件的显示位置下移一层。
- 设为父控件的下一个控件：点击"←"按钮，可使选中控件变为父控件的下一个控件。
- 设为上一控件的最后一个子控件：点击"→"按钮，可以使选中控件变为其上一个控件的最后一个子控件。
- 编辑控件名称：双击控件名称，会弹出编辑框，可直接修改控件名称。
- 拖曳修改Z方向顺序：点击控件但不释放鼠标，拖拽可直接修改控件的所在层次。
当控件属性设置异常时，控件右侧会显示黄色警告图标。当鼠标悬停在图标上时会显示详细的异常信息，如下图所示。
# 2.10 控件属性编辑器
通过控件属性编辑器可以修改被选中的控件的属性值，修改后在窗体编辑器上实时生效。不同的控件有不同的属性。以功能进行划分，可以分为如下表所示的分组。
| 项目 | 说明 |
|---|---|
| 名称 | 控件的名称和类型。 |
| 布局 | 控件及其子控件的布局。 |
| 样式 | 控件的外观，比如背景颜色、边框颜色等。 |
| 动画 | 控件的动画，主要指控件进入/退出窗口或强调时的动画。仅非window类型的控件有效。 |
| 值 | 控件的显示值，比如value、text等。 |
| 窗口过渡动画 | 窗口打开或关闭时的过渡动画，比如平移动画、弹出动画等。仅窗体类型的控件有效。 |
| 窗口子控件焦点 | 窗口内部的子控件的焦点切换方式。仅窗体类型的控件有效。 |
| 杂项 | 其他属性。 |
| 自定义 | 用户自定义的属性。 |
这里不对控件的属性做详细介绍，当鼠标移动到属性名称上方时可以显示该属性的详细描述。关于控件的更多信息，请参阅《AWTK-API.chm》的manual部分。
# 2.10.1 设置控件样式
点击展开控件属性的样式分组，会显示控件state状态时的样式预览，以及样式属性列表。通过样式分组，可以进行以下操作：
(1) 设置要使用的公共样式：点击style属性右侧的下拉列表，可以设置该控件要使用的公共样式，修改公共样式不会影响控件私有的样式属性。
(2) 切换控件的状态：点击state属性右侧的下拉列表，可以切换当前编辑的控件状态。
(3) 设置样式属性：直接设置样式属性的值即可，设置后该属性将变为控件私有的。
(4) 设置样式属性为私有值：可以把当前属性设为控件私有的，此时控件的XML上会有该属性的定义。有3种方式：
- 点击样式属性值右侧的"fx all"按钮；
- 长按或者右键点击"fx all"按钮，再点击“设为私有值”；
- 长按或者右键点击"fx all"按钮，再点击“设为私有值并应用到全部状态”，应用到所有状态会使该样式属性在所有控件状态下都等于该私有值。
(5) 恢复样式属性为公共值：可以把当前属性恢复为公共值，即默认为公共样式中对应的属性值，同时会删除控件的XML上对应的属性定义。有3种方式：
- 点击样式属性值右侧的"fx"按钮；
- 长按或者右键点击"fx"按钮，之后点击“恢复为公共值”；
- 长按或者右键点击"fx"按钮，之后点击“恢复为公共值并应用到全部状态”， 应用到所有状态会使该样式属性在所有控件状态下都等于公共值。
(6) 恢复全部样式属性为公共值：点击样式分组栏上方的 按钮，之后点击“全部恢复为公共值”，可以把控件的所有样式属性恢复为公共的样式属性值。
(7) 保存为公共样式：点击样式分组栏目右侧的按钮，之后点击“保存为公共样式”；在弹出的对话框中设置好目标样式文件、样式名称后，点击“保存但使用新的样式”即可；如果需要保留控件私有的样式属性，则可以选择点击“保存但保留原样式”。
(8) 跳转到公共样式：点击样式分组栏目右侧的按钮，之后点击“跳转到公共样式”，如果公共样式存在，则可以打开公共样式所属的样式文件，并定位到该样式。
(9) 打开窗体样式文件：点击样式分组栏目右侧的按钮，之后点击“打开窗体样式文件”，如果窗体样式文件存在，则可以打开该文件。
(10) 打开全局样式文件：点击样式分组栏目右侧的按钮，之后点击“打开全局样式文件”，如果全局样式文件存在，则可以打开该文件。
(11) 添加自定义样式属性：点击样式分组栏目右侧的按钮，之后点击“添加自定义样式属性”，在弹出的对话框中设置好属性所属的控件状态、名称后点击“确定”即可。
需要注意的是：
- AWTK优先使用控件私有的样式属性绘制控件，其次使用公共的样式属性。
- 控件私有的样式属性，指控件自身的以"style:"开头的属性，在UI文件的XML描述中有对应的属性定义，比如style:normal:bg_color。
- 公共的样式属性，指在样式文件中定义的样式，通过控件的style属性来指定控件当前使用的样式。
- AWTK优先使用窗体样式文件，其次为全局样式文件。
- 窗体样式文件，指以窗体的theme属性（如果theme属性没有设置则使用窗口的name属性）为文件名的样式文件。
- 全局样式文件，指缺省样式文件，固定命名为default.xml。
# 2.10.2 设置控件布局
点击展开控件属性的布局分组，会显示布局属性列表。通过布局分组可以进行如下操作。
# 1. 设置控件自身的布局
x、y、w、h控制控件自身的布局，有3种设置方式。
- 像素方式：直接指定像素值，这是缺省方式，也是最不灵活的方式。
- 百分比方式：
- x、w的值如果包含“%”，则自动换算成相对于其父控件宽度的百分比；
- y、h的值如果包含“%”，则自动换算成相对于其父控件高度的百分比。
- 相对方式：
- x的值设置成“c:-10”，可以使控件在水平方向上居中并向左偏移10像素；
- x的值设置成“r:10”，可以使控件位于其父控件的右侧并向左偏移10像素；
- y的值设置成“m”，可以使控件在垂直方向上居中；
- y的值设置成“b”，可以使控件位于其父控件的底部。
像素方式与百分比方式的宽度和高度可以是负数；宽度为负数，其实际值为父控件的宽度 + 该负值；高度为负数，其实际值为父控件的高度 + 该负值。
点击旁边的“切换为百分比”按钮可以将当前数值切换为百分比形式显示，点击“设为属性变化带动画”按钮，可以将该属性变为变化时带动画效果，而不是瞬间变化。
# 2. 设置子控件的布局
children_layout属性控制子控件的布局。点击children_layout属性右侧的编辑框，可以打开"设置子控件的排版"对话框；选择一种排版类型并设置好参数后，点击"确定"即可看到排版效果。
Designer目前支持的子控件排版及其参数如下：
- 无：表示不使用子控件布局。
- 单行：表示单行布局，所有子控件在水平方向上排成一行。需要设置的参数有：
- 不可见的控件：是否给不可见的控件留位置；
- 禁用的控件：是否给禁用的控件留位置；
- 水平间距：水平方向上的边距，单位为像素；
- 垂直间距：垂直方向上的边距，单位为像素；
- 子控件间的间距：子控件之间的间距，单位为像素。
- 水平对齐的方式：子控件整体的水平对齐方式。
- 单列：表示单列布局，所有子控件在垂直方向上排成一列。需要设置的参数有：
- 不可见的控件、禁用的控件、水平间距、垂直间距、子控件间的间距；
- 网格：表示网格布局，所有子控件放在M*N的网格中。需要设置的参数有：
- 不可见的控件、禁用的控件、水平间距、垂直间距、子控件间的间距；
- 行数/高度：当指定高度时，表示一行的固定高度，单位为像素；否则为行数。
- 列数/宽度：当指定宽度时，表示一列的固定宽度，单位为像素；否则为行数。
- 列表：表示列表布局，仅对list_view控件下的scroll_view控件有效。需要设置的参数有：
- 不可见的控件、禁用的控件、水平间距、垂直间距、子控件间的间距；
- 默认行高：作用与list_view的default_item_height属性相同。
- 行高：作用与list_view的item_height属性相同，如果行高未指定则使用默认行高。
- 列数：列表的列数。
# 2.10.3 设置控件动画
点击展开控件属性的动画分组，会显示控件动画列表，默认没有动画。通过动画分组，可以进行以下操作：
- 添加动画：点击"+"按钮，可以打开如下图所示的“设置动画”对话框（不同的控件支持的动画类型略有不同），设置动画参数后点击“确定”即可新建一个控件动画。
- 删除动画：点击控件动画右侧的"×"按钮，可以删除该动画。
- 编辑动画：双击控件动画，可以在弹出的“设置动画”对话框中重新设置动画参数。
- 清空动画：点击"清空"按钮，可以删除设置的所有控件动画。
Designer目前支持的控件动画及其参数如下：
- 无：表示无动画。
- 位移：表示位移动画。需要设置的参数有：
- 名称：动画的名称，在代码中可以通过动画名称控制动画启动、暂停等。
- 表示位移动画。需要设置的参数有：
- 名称：动画的名称，在代码中可以通过动画名称控制动画启动、暂停等。
- 延迟启动时间：动画启动后可以延迟一段时间才真正启动，单位为ms。
- 单次动画持续时间：动画启动后一次变化的持续时间，单位为ms。
- 时倍率：动画的时间倍率，可以按比例改变真实时间，形成时间变快和变慢的效果。
- 单次动画趋势：按设定插值算法模拟一次动画的变化过程，形成匀速、加速、减速等变化效果。
- 往返次数：动画往返的次数（一往一返为1次），默认为禁用，为0时表示永久播放。
- 重复次数：动画重复执行的次数，默认为禁用，为0时表示永久播放。
- 动画创建后自动播放：勾选则表示运行时动画对象被创建就立即启动。
- 动画结束时自动销毁：勾选则表示按设定的逻辑执行完毕后自动销毁动画对象。
- x方向：单次动画中控件x方向位置的起始值和结束值。
- y方向：单次动画中控件y方向位置的起始值和结束值。
- 值：表示值动画。需要设置的参数有：
- 公共参数；
- 值：单次动画中控件值的起始值和结束值。
- 透明度：表示透明度动画。需要设置的参数有：
- 公共参数；
- 透明度：单次动画中控件透明度的起始值和结束值。
- 缩放：表示缩放动画。需要设置的参数有：
- 公共参数；
- x方向：单次动画中控件x方向缩放比例的起始值和结束值；
- y方向：单次动画中控件y方向缩放比例的起始值和结束值。
- 旋转：表示旋转动画。需要设置的参数有：
- 公共参数；
- 旋转：单次动画中控件旋转角度的起始值和结束值，单位为弧度。
- 属性：表示属性动画。需要设置的参数有：
- 公共参数；
- 属性名称：动画过程中需要改变的控件属性的名称；
- 属性值：单次动画中控件目标属性的起始值和结束值。
需要注意的是：
- 公共参数指名称、延迟启动时间、单次动画持续时间、时倍率、单次动画趋势、往返次数、重复次数、动画创建后自动播放、动画结束时自动销毁。
- 目前仅image、gif、svg、mutable_image等图片类型的控件支持缩放动画和旋转动画。
# 2.10.4 设置窗口过渡动画
窗口需要Ctrl+鼠标点击窗口的空白处或者在对象浏览器上点击才能被选中。
点击展开控件属性的窗口过渡动画分组，会显示与过渡动画相关的属性。通过该分组，可以进行以下操作：
- 设置窗口打开动画：点击open_anim_hint属性右侧的编辑框，可以打开“设置窗口动画”对话框，设置好动画参数后，点击“确定”即可。
- 设置窗口关闭动画：点击close_anim_hint属性右侧的编辑框，可以打开“设置窗口动画”对话框，设置好动画参数后，点击“确定”即可。
- 使能窗口动画：点击disable_anim属性右侧的勾选按钮。
Designer目前支持的窗口动画及其参数如下：
(1) 无：表示无动画。
(2) 平移：表示平移动画，即前后两个窗口同时向一个方向平移，适用于非dialog类型的窗口，有2种：
- 左右平移：打开窗口时从右往左平移，关闭窗口时从左往右平移；
- 上下平移：打开窗口时从下往上平移，关闭窗口时从下往上平移。
需要设置的参数有：
- 动画持续时间：窗口动画的持续时间，单位为ms；
- 动画趋势：按设定插值算法模拟动画的变化过程，形成匀速、加速、减速等变化效果。
(3) 覆盖：表示覆盖动画，即后一个窗口覆盖前一个窗口，适用于非dialog类型的窗口，有4种：
- 向上覆盖：打开窗口时新窗口从下往上覆盖，关闭窗口时当前窗口从上往下退出；
- 向下覆盖：打开窗口时新窗口从上往下覆盖，关闭窗口时当前窗口从下往上退出；
- 向左覆盖：打开窗口时新窗口从右往左覆盖，关闭窗口时当前窗口从左往右退出；
- 向右覆盖：打开窗口时新窗口从左往右覆盖，关闭窗口时当前窗口从右往左退出。
需要设置的参数有：
- 动画持续时间、动画趋势
- 透明度：前一个窗口透明度的起始值和结束值，可以实现背景动态变暗或变亮的效果。
(4) 弹出：表示弹出动画，即新窗口向一个方向弹出，适用于dialog类型的窗口，有2种：
- 向上弹出：打开窗口时新窗口从下往上弹出，关闭窗口时当前窗口从上往下退出；
- 向下弹出：打开窗口时新窗口从上往下弹出，关闭窗口时当前窗口从下往上退出。
需要设置的参数有：动画持续时间、动画趋势
(5) 淡入淡出：表示淡入淡出动画，适用于dialog类型的窗口。需要设置的参数有：动画持续时间、动画趋势。
(6) 缩放：表示缩放动画，适用于dialog类型的窗口。需要设置的参数有：动画持续时间、动画趋势。
# 2.10.5 添加自定义属性
点击"控件编辑器"右侧的"+"按钮，可以打开"添加自定义属性"对话框；设置好自定义属性的名称和值之后，点击"确定"，会将新增的属性加入到控件属性编辑器的自定义分组。
需要注意的是：
- 属性名称不能为控件现有的属性或者"style:"开头的样式属性。
- 如果需要添加自定义的样式属性，可以通过样式分组的菜单进行添加，更多信息请参阅2.10.1。
# 2.10.6 异常提示
如下图所示，当控件某个属性设置有异常时，属性所在分组及该属性的编辑框会用黄色边框高亮显示。当焦点进入编辑框时，会显示详细的异常信息。
# 2.11 控件事件编辑器
如上图所示，选中控件后，通过控件编辑器的"事件"分页，可以设置选中控件的事件绑定，具体的操作如下：
(1) 添加事件绑定：点击搜索框右侧的"+"按钮，可以打开当前控件支持的事件类型；点击指定的事件类型，可以添加一个默认的事件绑定；一个事件类型只能有一个事件绑定。
(2) 删除事件绑定：点击事件绑定右侧的"删除"按钮，可以删除该绑定。
(3) 修改事件绑定：展开事件绑定，可以修改事件绑定编辑，包括：
- 动作：表示事件触发后要执行的动作，不同的动作会有不同的参数；
- 动作结束后是否退出程序；
- 动作结束后是否同步数据到模型；
- 动作结束后是否关闭当前窗口。
事件绑定中支持的动作如下：
(1) 打开窗口：用于打开新窗口。可以设置如下参数：
- 窗口的名称：点击右侧的下拉框，可以选择项目中已有的窗口；
- 切换到已存在的窗口：勾选该参数时，会切换到当前已打开的窗口；
- 切换时关闭当前窗口：勾选该参数时，打开窗口时会关闭当前窗口。
(2) 关闭窗口：用于关闭当前窗口。
(3) 执行回调函数：用来绑定事件回调函数。可以设置如下参数：
- 函数名：事件回调函数的名称。
(4) 执行Fscript代码：用于执行一段fscript脚本。点击“FScript代码”右侧的输入框，可以打开“设置绑定规则”对话框，编辑FScript脚本。
关于Fscript脚本的更多信息，请参阅SDK/awtk/docs/fscript.md文档。
# 2.12 窗体编辑器
Designer默认使用窗体编辑器打开UI文件。窗体编辑器是一个图形编辑器，可以通过拖拽的方式在窗体上添加控件，此外，还可以改变控件位置、大小、层次等，所见即所得。
# 2.12.1 添加、删除控件
在编辑区左侧的控件列表中选中需要的控件并拖拽到窗体上即可添加控件。如果要删除不需要的控件，则选中控件后按Delete键即可。
关于控件列表的更多信息，请参阅2.7。
# 2.12.2 选中控件
可以通过如下方式来选中编辑区中的控件：
点击控件：直接用鼠标点击可以选中控件，但一次仅能选中一个。如果需要多选，则可以用Ctrl + 鼠标点击的方式。
框选：点击编辑区的空白处但不释放鼠标，拖动后会有一个半透框，鼠标释放时被框住的控件均会被选中，如下图所示；如果需要同时选中其他区域的控件，可以按住Shift键后再次框选。
- 在对象浏览器上点击控件：关于对象浏览器的更多信息，请参阅2.9。
对于窗体本身，只能通过Ctrl+鼠标点击或者在对象浏览器上点击的方式选中。
# 2.12.3 改变控件的大小
选中控件后，可以通过如下方式改变控件的大小：
- 鼠标拖拽
控件被选中后会被有一个带8个小正方形的方框框住，将鼠标光标移到小正方形上后按下鼠标并拖拽即可改变控件的大小，如下图所示；如果拖拽的同时按下Shift键，则可以锁定纵横比例。
- 在控件属性编辑器上修改控件属性
更多信息请参阅2.10.2章节。
# 2.12.4 改变控件的位置
选中控件后，可以通过如下方式改变控件的位置：
- 鼠标拖拽
点击控件后不释放鼠标，直接拖拽即可，这是最简单的方式。如果拖拽的同时按下Shift键，则可以将控件限制在水平或垂直方向上。如果拖曳的同时按下Alt键，则控件可以按网格一小格一小格地移动。
- 键盘方向键微调
按下键盘方向键，控件可以1像素1像素地移动。如果同时按下Alt键，则控件可以按网格一小格一小格地移动。
- 工具栏上的对齐、分布、顺序等操作
更多信息请参阅2.3.2章节。
- 对象浏览器上的控件层次操作
更多信息请参阅2.9章节。
- 在控件属性编辑器上修改控件属性
更多信息请参阅2.10.2章节。
# 2.12.5 编辑显示文本
当鼠标停留在部分文本控件上方时，控件右侧会显示一个"编辑"按钮，点击可直接编辑当前显示的文本，如下图所示。
- 双击控件也可以触发上述编辑操作。
- 此类控件有button、check_button、radio_button、tab_button、edit、spin_box、label。
# 2.12.6 编辑容器控件
容器控件内部可以容纳任意控件，但不同类型的容器有不同的特性，因此有不同的编辑方式。
- 通用容器：仅提供简单的收纳功能。
如下图所示，当控件被拖曳到此类容器上方时，可以通过按空格键将其放入容器内部；容器内部的子控件仍可以用鼠标点击选中。
此类容器有各类窗体、button、edit、combo_box、image、label、view、list_item、list_view、list_view_h、color_picker、tab_control。
- 裁剪容器：该容器会裁剪超出容器范围的子控件，容器的子控件无法直接用鼠标选中。
如下图所示，当鼠标停留在此类容器控件上方时，控件右侧会显示一个"编辑"按钮，点击可进入容器内部编辑其子控件；进入容器内部后，可以通过点击窗体编辑器下方的"←"按钮返回。
鼠标双击裁剪容器控件，也可以进入容器内部进行编辑。此类容器有scroll_view、slide_menu、tab_button_group、clip_view。
- 多页容器
多页容器内部可以有多个页面，但同时只能显示一个。
如下图所示，当鼠标停留在此类容器控件上方时，控件右侧会显示一个页面列表。通过该列表，可以进行以下操作：
- 进入页面内部：点击页面右侧的"编辑"按钮，可以页面内部进行编辑；进入页面内部后，可以通过点击窗体编辑器下方的"←"按钮返回。
- 删除页面：点击页面右侧的"×"按钮，可以删除页面。
- 添加页面：点击"+"按钮，可以添加新的页面。
- 切换当前显示页：双击页面项，可以切换容器当前显示的页面。
鼠标双击容器，可以进入当前页面内部。此类容器有slide_view、pages。
# 2.12.7 辅助功能
# 1. 标尺
如上图所示，通过点击编辑器下方的"标尺"按钮，可以启用或禁用标尺。通过标尺，可以进行以下操作：
- 显示鼠标的实时位置：当鼠标在编辑区内移动时，标尺上会显示光标的实时位置。
- 添加参考线：移动鼠标到标尺上，会出现一条跟随鼠标移动并贯穿编辑区的红线，此时点击可以添加一条参考线。
- 改变参考线位置:移动鼠标到标尺上参考线的位置，会出现一个倒三角，点击并拖拽可以改变参考线的位置。
- 删除参考线：移动鼠标到标尺上参考线的位置，会出现一个"×"按钮，点击可以删除参考线。
- 清空参考线：右键点击标尺，可以弹出右键菜单，再点击"清空对齐线"，可以删除该标尺上添加的的所有参考线。
# 2. 网格
如上图所示，通过点击编辑器下方的"网格"按钮，可以启用或禁用网格。启用网格后，在编辑区上会出现网格。网格线可以用于辅助对齐的参考线。
# 3. 智能参考线
如上图所示，智能参考线是在拖拽或调整控件大小的过程中会出现的红线。当控件与邻近控件的中心点、边缘对齐，或者与窗口的中心点、边缘对齐，或者居于两个控件的中间或相同距离时，会出现一条很直观的对齐辅助线并自动贴齐。
# 4. 缩放编辑区的显示比例
如上图所示，点击并拖动窗体编辑器下方的缩放比例尺上的滑块，可以缩放编辑区的显示比例；点击"1:1"按钮，可以快速恢复到100%。
将鼠标光标移动到编辑区上，按住Alt键的同时滚动鼠标滚轮，也可以进行缩放。
# 5. 查看文件的文本内容
如上图所示，点击窗体编辑器的下方的编辑模式按钮可以切换编辑模式，有"form editor"、"text editor"两个选项，详情如下：
- form editor：图形编辑器，以可视化图形方式对文件进行编辑。
- text editor：文本编辑器，以文本方式对文件进行编辑，目前仅为只读。
# 6. 显示控件的虚线框
如上图所示，点击窗体编辑器下方的"虚线框"按钮，可以显示或隐藏控件框住控件的虚线框。该虚线框表示控件的矩形区域。
# 2.12.8 键盘快捷键
窗体编辑器的键盘快捷键如下：
- 剪切：选中控件后，按下Ctrl + X，可以剪切控件。
- 复制：选中控件后，按下Ctrl + C，可以复制控件；按下Ctrl并拖拽控件，可以复制控件。
- 粘贴：按下Ctrl + V，在鼠标位置粘贴上一次剪切或者复制的控件。
- 撤销：按下Ctrl + Z，可以撤销上一次的编辑操作。
- 恢复：按下Ctrl + Y，可以恢复上一次的撤销操作。
- 取消编辑：拖拽控件时，按下Esc，可以取消当前的拖拽操作，使控件回到原来的位置并恢复大小；按下Ctrl并拖拽控件进行复制时，按下Esc，可以取消复制操作。
窗体（window、dialog等）不支持复制。
# 2.13 样式编辑器
Designer默认使用样式编辑器打开样式文件。样式编辑器是一个样式树，可以编辑样式的属性，以及预览样式的显示效果。
样式文件存放在主题目录的styles目录。通过项目管理器（请参阅2.6）或者控件属性编辑器的样式分组（请参阅2.10.1），可以打开样式文件。
样式编辑器提供以下操作。
(1) 添加样式：点击编辑器右下方的"+"按钮，可以打开“添加样式”对话框，设置好样式类型、名称后点击“确定”即可添加样式。
(2) 删除所有样式：点击编辑器右下方的"×"按钮，会弹出“删除所有样式”弹窗，可以在此删除当前页面展示的所有样式。
(3) 删除样式：展开某个样式，点击右上角的"删除"按钮，可以删除样式。
(4) 编辑样式：展开某个样式，可以直接编辑样式的名称及其包含的所有属性。
(5) 添加自定义样式属性：展开某个样式，点击右上角的"+"按钮，可以添加一个自定义的样式属性。
(6) 恢复全部样式属性为公共值：展开某个样式，点击右上角的"恢复"按钮，可以恢复全部样式属性为缺省值。
(7) 设置样式属性为私有值：可以将当前属性变为该样式的私有属性。有3种方式：
- 点击样式属性值右侧的"fx all"；
- 长按或者右键点击"fx all"，再点击“设为私有值”；
- 长按或者右键点击"fx all"，再点击“设为私有值并应用到全部状态”，应用到所有状态会使该样式属性在所有控件状态下都等于该私有值。
(8) 恢复样式属性为公共值 可以删除该样式的私有属性，同时把属性值更新为缺省值。有3种方式：
- 点击样式属性值右侧的"fx"；
- 长按或者右键点击"fx"，之后点击“恢复为公共值”；
- 长按或者右键点击"fx"，之后点击“恢复为公共值并应用到全部状态”， 应用到所有状态会使该样式属性在所有控件状态下都等于公共值。
(9) 查看文件的文本内容：点击编辑器下方的“form editor”、“text editor”，可以切换编辑模式。
样式的私有属性，指样式自身定义的属性，在样式文件的XML描述中有对应的属性定义。
样式编辑器的键盘快捷键如下：
- 剪切：选中样式后，按下Ctrl + X，可以剪切样式。
- 复制：选中样式后，按下Ctrl + C，可以复制样式。
- 粘贴：按下Ctrl + V，可以覆盖被选中的样式，或者新建样式。
- 撤销：按下Ctrl + Z，可以撤销上一次的编辑操作。
- 恢复：按下Ctrl + Y，可以恢复上一次的撤销操作。
# 2.14 多国语言编辑器
Designer默认使用多国语言编辑器打开语言文件。多国语言编辑器是一个翻译文本列表，可以编辑翻译文本。
语言文件存放在主题目录的strings目录。点击工具栏的翻译按钮，可以打开缺省的语言文件。
多国语言编辑器的相关操作如下：
- 添加文本：点击"T+"按钮，可以添加一条翻译文本。
- 添加语言：点击"中EN+"按钮，可以添加一种语言。
- 清空文本：点击"清空"按钮，可以删除勾选的文本。
- 删除文本：点击文本右侧的"×"按钮，可以删除对应的文本。
- 编辑文本：点击文本编辑框，可以修改文本。
- 检索项目的待翻译文本：点击"检索"按钮，可以检索项目所有UI文件中待翻译的文本，并更新到文本列表。
- 编辑模式切换：点击编辑器下方的"form editor"、"text editor"，可以切换编辑模式。
Designer用下图所示的图标标记控件的文本是否需要翻译。
AWTK根据原始文本查找当前语言对应的文本，如果找到则使用该文本进行显示，否则使用原始文本。
多国语言编辑器的键盘快捷键如下：
- 撤销：按下Ctrl+Z，可以撤销上一次的编辑操作。
- 恢复：按下Ctrl_Y，可以恢复上一次的撤销操作。