2、TouchGFX Designer：界面布局、控件面板、属性编辑器、交互编辑器、屏幕管理
打开 TouchGFX Designer，第一眼你会觉得它像个普通的 UI 拖拽工具。但用久了你会发现，它其实是个「嵌入式 GUI 的编译器前端」。说白了，你拖的每一个控件、改的每一个属性，最终都会被翻译成高效的 C++ 代码。
我个人习惯先把 Designer 的界面拆成四个区域来理解。这样上手最快，也最容易记住每个面板是干什么用的。
2.1 整体界面布局
Designer 的窗口布局很清晰。默认情况下，左边是控件面板，中间是画布，右边是属性编辑器，底部是交互编辑器。顶部还有一排工具栏，用来管理屏幕和项目设置。
嗯，这里要注意一点：布局是可以自定义的。你可以拖拽面板的边框调整大小，也可以把某个面板拖出来变成独立窗口。但我建议初学者先保持默认布局，等熟悉了再按自己的习惯调整。
核心思路： Designer 的布局设计遵循「所见即所得」原则。你在画布上看到的，基本就是最终硬件上显示的样子。但别忘了，它只是「基本」——实际运行时还有帧率、刷新策略、内存限制这些因素会影响效果。
我曾经有个项目，客户在 Designer 里预览效果完美，结果烧到板子上发现界面卡顿。后来排查发现，是他在一个屏幕上放了太多透明叠加的控件，导致渲染压力过大。所以，Designer 预览只是第一步，性能验证还得靠真机。
2.2 控件面板
控件面板在窗口左侧。这里列出了所有你能用的 UI 元素，比如按钮、文本框、图片、进度条、滑动条等等。我把它分成三类：
| 类别 | 包含控件 | 说明 |
|---|---|---|
| 基础控件 | Button、Text Area、Image、Box | 最常用，几乎每个界面都会用到 |
| 容器控件 | Container、Scrollable Container、Slideable Container | 用来组合和管理子控件，实现复杂布局 |
| 高级控件 | Slider、Progress Bar、Graph、List Layout | 带交互逻辑或数据绑定的控件 |
你想想看，为什么 TouchGFX 要把控件分这么细？其实是为了代码生成时做优化。基础控件生成的代码最轻量，高级控件会附带更多的回调函数和状态机逻辑。
我的习惯： 每次拖控件之前，先想清楚这个控件是「静态显示」还是「动态交互」。静态的用 Box 或 Image 就够了，别为了好看硬上高级控件，否则生成的代码体积会膨胀。
2.3 属性编辑器
选中画布上的任意控件，右侧的属性编辑器就会显示它的所有可调参数。这里我重点说几个容易踩坑的地方：
- 位置与大小： x、y、width、height。注意单位是像素，而且是相对于父容器的坐标。
- 可见性： Visible 属性。我经常用它来做界面切换时的淡入淡出效果。
- Alpha 值： 透明度。0 完全透明，255 完全不透明。这个属性很消耗性能，别滥用。
- 纹理与颜色： 控件的背景图或填充色。注意图片资源要提前导入到项目中。
避坑指南： 我曾经在属性编辑器里把一个按钮的宽度设成了 0，结果调试了半天找不到它为什么点不到。后来才发现是宽度为 0 导致点击区域消失了。所以，属性值一定要检查边界情况。
属性编辑器还有一个隐藏功能：你可以同时选中多个控件，然后批量修改它们的共同属性。比如统一调整一组按钮的高度，或者一次性把所有文本的颜色改成主题色。这个技巧在调整大界面时特别省时间。
2.4 交互编辑器
交互编辑器在窗口底部。它是 Designer 里最核心的部分，也是初学者最容易搞混的地方。
交互编辑器的本质是一个「事件 → 动作」的映射表。你告诉 Designer：当某个事件发生（比如按钮被点击），就执行某个动作（比如切换到另一个屏幕）。
常见的交互类型包括：
- 点击交互： 按钮按下、释放、长按
- 滑动交互： 滑动条拖动、容器滑动
- 屏幕切换： 跳转到指定屏幕、返回上一屏幕
- 动画交互： 控件移动、缩放、淡入淡出
- 数据交互： 更新文本内容、改变进度条数值
我个人习惯把交互编辑器当成一张「逻辑表格」来用。每一行就是一个规则，规则之间不要互相冲突。比如，同一个按钮既定义了「点击切换屏幕」，又定义了「点击播放动画」，那实际执行顺序可能会出问题。
关键点： 交互编辑器生成的代码会放在 ScreenView 类的 setupScreen() 或 handleClickEvent() 方法里。如果你后续要手动改代码，记得先理解 Designer 生成的交互逻辑，别直接覆盖。
2.5 屏幕管理
屏幕管理在顶部的工具栏里。你可以在这里新建屏幕、删除屏幕、调整屏幕之间的跳转关系。
每个屏幕在代码里对应两个类：ScreenView（界面层）和 ScreenPresenter（逻辑层）。Designer 会自动生成这两个类的骨架代码，你只需要在生成的代码里填充业务逻辑就行。
屏幕切换的方式有两种：
- 直接切换： 旧屏幕销毁，新屏幕创建。适合页面差异大的场景。
- 堆叠切换： 旧屏幕压入栈，新屏幕覆盖上去。适合需要返回上一页的场景。
我记得有个项目需要做三级菜单，当时用了堆叠切换。结果发现栈深度没控制好，切了十几层之后内存溢出了。后来我加了个限制：最多保留三级栈，超过就强制弹出最底层的屏幕。
建议： 屏幕数量控制在 10 个以内，否则 Designer 生成的代码会变得很臃肿。如果界面真的很多，考虑用动态加载的方式，而不是把所有屏幕都预创建好。
2.6 知识体系总览
下面这张图把 Designer 的五个核心模块串起来了。你可以把它当成一个快速索引，以后用到哪个模块就回来看看。
2.7 实战建议
学到这里，你应该对 Designer 的五个核心模块有了整体认识。我建议你打开 Designer，对照着这篇文章，把每个面板都点开看看。不用急着做项目，先熟悉每个按钮、每个属性是干什么的。