4. TouchGFX Designer核心操作

TouchGFX Designer 是复杂 HMI 项目从“视觉设计”走向“可运行固件”的中枢工具。它并不是一个单纯的 UI 画图软件，而是把画布布局、控件属性、交互行为、屏幕组织、自定义容器以及代码生成与工程同步串成一条闭环链路。理解这条链路，才能避免“界面画得漂亮、代码却无法维护”的常见困境。

一、画布与坐标系：布局的基准面

Designer 的画布对应目标屏幕的物理像素区域，通常以左上角为原点，X 向右、Y 向下。画布尺寸必须与目标显示屏分辨率一致，否则会出现裁剪或黑边。画布中每个控件都有位置、尺寸、层级和可见性四个基础属性。层级决定遮挡关系，后添加的控件默认在上层，可通过“置顶/置底”调整。

画布还提供网格与对齐辅助线，用于快速对齐多个控件。对于复杂 HMI，建议先规划区域：状态栏、主内容区、底部导航区，再在区域内放置控件，而不是逐个控件随意拖拽。这样生成的代码结构更清晰，后续维护成本更低。

二、控件与交互：从静态元素到可响应行为

Designer 提供按钮、文本、图像、进度条、滑动条、列表、时钟等常用控件。控件本身是静态的，交互才是让界面“活起来”的关键。交互通过“触发器 + 动作”定义，例如：按钮被点击时切换到某屏幕、滑动条值改变时更新文本、定时器触发时刷新数据。

交互配置的核心是明确三件事：谁触发、触发什么、触发后做什么。Designer 中常见的触发器包括 Clicked、ValueChanged、Pressed、Released、Timer 等；动作包括 ChangeScreen、SetValue、CallNewVirtualFunction、StartTimer 等。对于需要业务逻辑的交互，应使用“虚函数”把控制权交给手写 C++ 代码，而不是把所有逻辑都塞进 Designer 配置里。

// 在 Designer 中为按钮添加交互：
// Trigger: Clicked
// Action: CallNewVirtualFunction -> handleStartClicked()

void Screen1View::handleStartClicked()
{
    // 业务逻辑：启动采集、更新模型、切换状态
    presenter->startAcquisition();
}

三、屏幕与自定义容器：复杂 HMI 的组织方式

屏幕（Screen）是 Designer 中的顶层视图单元，通常对应一个完整页面。复杂项目往往有几十个屏幕，如果每个屏幕都从零搭建，重复劳动极大。自定义容器（Custom Container）正是为解决复用问题而设计：把一组控件和交互封装成可复用的组件，例如顶部状态栏、参数卡片、报警列表项。

自定义容器可以像普通控件一样被拖入任意屏幕，并暴露属性供外部配置。它的内部逻辑与外部屏幕解耦，修改容器只需改一处，所有引用它的屏幕都会同步更新。这是复杂 HMI 保持可维护性的关键手段。

四、代码生成与工程同步：设计到固件的桥梁

Designer 的“Generate Code”会把画布、控件、交互和屏幕配置翻译成 C++ 代码。生成结果通常分为两类：一类是自动生成、不应手动修改的 Base 文件；另一类是供开发者编写业务逻辑的 View/Presenter 文件。理解这个边界非常重要：Base 文件会在每次生成时被覆盖，手写逻辑必须放在非 Base 文件中。

工程同步则解决“Designer 与 IDE 工程如何保持一致”的问题。Designer 负责 UI 资源与视图结构，IDE 负责编译、链接和烧录。每次在 Designer 中新增屏幕、控件或资源后，都需要重新生成代码，并让 IDE 工程识别新增文件。常见做法是保持工程目录结构稳定，把生成文件放在固定路径，避免手动移动。

五、案例与复盘：一个参数设置页的完整链路

假设要做一个“参数设置页”：顶部是标题栏，中间是三个参数卡片，底部是保存按钮。合理做法是：先把标题栏做成自定义容器，把参数卡片做成另一个自定义容器并暴露“参数名、当前值、单位”三个属性；然后在设置屏幕中拖入三个卡片实例，分别配置属性；保存按钮的 Clicked 交互绑定到虚函数，在 View 中读取卡片值并写入模型。

常见误区有三个：第一，把所有控件直接堆在屏幕上，导致后续改样式要逐个修改；第二，把业务逻辑写进 Designer 的交互动作里，生成代码后难以调试；第三，修改了 Base 文件，下一次生成代码时被覆盖，造成“代码莫名丢失”。复盘时应检查：是否使用了自定义容器、是否把逻辑放在非 Base 文件、是否在每次生成后确认工程文件已同步。

掌握画布、控件、交互、屏幕、自定义容器、代码生成与工程同步这条完整链路，TouchGFX Designer 就不再只是“画界面”的工具，而是复杂 HMI 项目可持续迭代的工程化入口。