3、第一个TouchGFX项目：创建空白项目、理解项目结构、屏幕（Screen）与容器（Container）的概念、模拟器运行
说实话，学任何新框架，最怕的就是一上来就面对一堆看不懂的文件。我当年第一次打开TouchGFX生成的工程时，也愣了几秒——这文件夹里都是些啥？
别急，这一章我们就亲手创建一个空白项目，然后把它拆开看看。你很快就会发现，TouchGFX的项目结构其实非常清晰，核心就两个东西：Screen（屏幕）和Container（容器）。
3.1 创建空白项目
打开TouchGFX Designer，点击右上角的“Create New Project”。你会看到几个模板选项：
- Empty UI —— 我们选这个，从零开始。
- Template UI —— 带一些预置控件，适合快速验证。
- Demo —— 完整示例，适合参考学习。
选Empty UI，然后配置项目参数：
| 参数 | 推荐值 | 说明 |
|---|---|---|
| Project Name | MyFirstProject | 项目名称，建议用英文 |
| Resolution | 480x272 | 模拟器默认分辨率，后面可以改 |
| Color Depth | 16-bit RGB565 | 大多数嵌入式屏都支持 |
| Target Platform | Simulator | 先跑模拟器，不急着烧硬件 |
点击Create，几秒钟后项目就生成了。嗯，就是这么简单。
3.2 理解项目结构
创建完成后，我们看看TouchGFX Designer自动生成了哪些文件。切换到文件视图（File View），你会看到这样的结构：
MyFirstProject/
├── assets/ # 资源文件（图片、字体、文本）
├── generated/ # 自动生成的代码（不要手动改！）
├── gui/ # 你的UI代码写在这里
│ ├── include/ # 头文件
│ └── src/ # 源文件
├── platform/ # 平台适配层（驱动、OS接口）
├── target/ # 目标板配置
├── TouchGFX/ # TouchGFX框架核心
├── CMakeLists.txt # CMake构建文件
└── MyFirstProject.touchgfx # Designer项目文件
你可能会问：这么多文件夹，我到底该动哪个？
说白了，你平时打交道最多的就是gui/目录。Designer生成的界面代码放在generated/里，你写的业务逻辑放在gui/里。两者互不干扰，这也是TouchGFX设计得比较聪明的地方。
3.3 Screen（屏幕）与Container（容器）的概念
这是TouchGFX里最基础的两个概念。理解它们，后面的动画、交互就都好办了。
什么是Screen？
Screen就是一整个屏幕。你可以把它理解成手机上的一个页面——比如主界面、设置界面、游戏界面。每个Screen占据整个显示区域，同一时间只能显示一个Screen。
什么是Container？
Container是屏幕里的组件。比如一个按钮、一个进度条、一个图片框，甚至是一组控件的集合。Container可以嵌套，一个Container里可以放另一个Container。
我习惯这样记：Screen是舞台，Container是演员。舞台一次只能有一个，但演员可以有很多个，还能组合表演。
| 概念 | 生命周期 | 典型用途 | 能否嵌套 |
|---|---|---|---|
| Screen | 进入时创建，离开时销毁 | 页面切换、主界面 | 不能嵌套Screen |
| Container | 随Screen创建，可复用 | 按钮、列表项、自定义控件 | 可以嵌套Container |
用SVG理解Screen和Container的关系
下面这张图展示了Screen和Container的层级关系。你看，Screen是顶层，下面挂着多个Container，Container里还能再挂子Container。
你看，Container B下面还挂了两个子Container。这种嵌套结构在实际项目中非常常见——比如一个列表项（Container）里包含图标、文字、进度条三个子Container。
3.4 在Designer中添加第一个Screen和Container
回到TouchGFX Designer，默认已经有一个Screen了，叫Screen1。我们来做点实际的操作：
- 在左侧Widgets面板里，找到Container，拖到中间的画布上。
- 选中这个Container，在右侧属性面板里把它的Width改成200，Height改成100。
- 再拖一个Text Area放到Container里面，文字改成“Hello TouchGFX”。
就这么几步，你已经创建了一个包含文本的Container。是不是很简单？
3.5 模拟器运行
UI搭好了，总得看看效果吧？TouchGFX的模拟器非常方便，不需要硬件就能跑。
点击Designer右下角的Run Simulator按钮（绿色小三角）。第一次运行会编译项目，可能需要几十秒。编译完成后，模拟器窗口就会弹出来。
你会看到：
- 一个480x272的模拟屏幕
- 你刚才添加的Container和文字
- 鼠标可以模拟触摸操作
嗯，这就是你的第一个TouchGFX应用。虽然现在啥交互都没有，但至少跑起来了。
3.6 本章小结
这一章我们做了三件事：创建了空白项目、理解了项目结构、搞清楚了Screen和Container的区别。最后还让模拟器跑了起来。