3、第一个TouchGFX项目：创建空白工程、屏幕与容器概念、模拟器运行与调试
说实话，很多初学者一上来就急着往界面上堆控件。结果呢？跑起来卡成幻灯片。我见过太多这样的案例了。所以这一章，咱们先不急着画界面，而是把TouchGFX的项目骨架搭明白。
你想想看，盖房子得先打地基。TouchGFX也一样。空白工程、屏幕、容器，这三个概念就是地基。搞懂了它们，后面再复杂的界面你都不会慌。
3.1 创建第一个空白工程
打开TouchGFX Designer，你会看到一个欢迎界面。别被它花里胡哨的模板吓到。咱们选「Create a new project」，然后选择「Empty Application」。
创建完成后，你会看到这样一个结构：
MyProject/
├── assets/ # 图片、字体、文本等资源
├── generated/ # 自动生成的代码（别手动改！）
├── gui/ # 你的UI逻辑代码
├── platform/ # 硬件平台相关代码
├── TouchGFX/ # TouchGFX框架核心
└── target/ # 目标板配置
嗯，这里要注意。很多新手会去改generated文件夹里的代码。我曾经也干过这事，结果下次重新生成时，改的东西全没了。白忙活半天。所以记住：generated文件夹是自动生成的，别碰它。你的代码应该写在gui文件夹里。
3.2 屏幕（Screen）到底是什么？
说白了，屏幕就是用户能看到的一个完整界面。比如手机的主屏幕是一个Screen，设置页面是另一个Screen。在TouchGFX里，每个Screen由两部分组成：
- View（视图）：负责显示和交互逻辑
- Presenter（主持人）：负责业务逻辑和数据处理
为什么这么分？我刚开始也觉得麻烦。直到有一次做产品迭代，UI要改但业务逻辑不变。有了这个分层，我只改了View，Presenter完全没动。省了大把时间。
3.3 容器（Container）—— 界面的乐高积木
容器是什么？你可以把它想象成一个盒子。这个盒子里可以放按钮、图片、文字，甚至再放一个盒子。容器本身不显示任何东西，但它帮你把界面组织得井井有条。
我在项目中遇到过这样一个场景：一个仪表盘界面，有温度、湿度、气压三个模块。每个模块都有标题、数值、图标。如果不用容器，代码会乱成一锅粥。用了容器，每个模块就是一个独立的Container，清晰又好维护。
TouchGFX里常用的容器有：
| 容器类型 | 用途 | 我的建议 |
|---|---|---|
| Container | 通用容器，可放任意控件 | 最常用，几乎每个界面都会用到 |
| ScrollableContainer | 可滚动的容器 | 内容超出屏幕时用，比如长列表 |
| SlideableContainer | 可滑动的容器 | 做侧滑菜单时特别好用 |
| ModalWindow | 模态弹窗容器 | 需要用户确认时才用，别滥用 |
3.4 模拟器运行与调试
写好了代码，总得跑起来看看效果吧？TouchGFX的模拟器就是干这个的。它能在你的电脑上模拟出嵌入式设备的运行效果，不用烧录到板子上就能调试。
运行模拟器很简单：
- 在TouchGFX Designer里点击右上角的「Run Simulator」按钮
- 或者直接按
F5快捷键 - 等待编译完成，模拟器窗口就会弹出来
模拟器跑起来后，你会发现它和真实设备几乎一模一样。触摸、滑动、动画，都能模拟。但有一点要注意：模拟器的性能比真实硬件好得多。在模拟器上跑60帧，不代表在板子上也能跑60帧。
Ctrl + D可以打开调试面板。里面能看到帧率、内存占用、绘制耗时。我每次改完代码，都会先看看帧率有没有掉。如果从60帧掉到30帧，那肯定是有地方写崩了。
3.5 知识体系总览
说了这么多，咱们用一张图把这一章的核心逻辑串起来：
3.6 动手试试
光看不练可不行。我建议你现在就打开TouchGFX Designer，创建一个空白工程。然后：
- 在Designer里添加一个Screen，看看View和Presenter是怎么生成的
- 往Screen里拖一个Container，再往Container里放几个按钮
- 按F5运行模拟器，看看效果
- 按Ctrl+D打开调试面板，观察帧率
做完这些，你就已经迈出了TouchGFX实战的第一步。后面咱们会在这个空白工程上，一步步搭建出真正不掉帧的界面。