4. 第一个TouchGFX项目：创建空白项目、添加文本控件、配置屏幕切换、模拟运行
好，到了真正动手的时候了。
前面三章我们聊了TouchGFX是什么、开发环境怎么搭、工程结构长什么样。说实话，光看不练容易忘。这一章我们就直接上手，从零创建一个空白项目，然后往里面塞一个文本控件，再配个简单的屏幕切换，最后在模拟器里跑起来看看效果。
我个人习惯是：每学一个新框架，第一件事就是让屏幕上显示一行字。字能出来，说明整个链路通了。你想想看，如果连Hello World都出不来，后面那些复杂的动画、图表、多语言，根本不用想。
本章目标：完成一个从创建到运行的完整闭环。你不需要理解每一行代码的含义，先感受一下TouchGFX的开发流程。
4.1 创建空白项目
打开TouchGFX Designer，你会看到一个欢迎界面。别慌，点那个“Create New Project”按钮。
弹出一个对话框，里面有几个选项：
- Project Name：给你的项目起个名字。我一般用“MyFirstProject”这种，简单直接。
- Project Location：选择存放路径。注意，路径里不要有中文和空格，否则后面编译可能会报一些莫名其妙的错。我曾经因为这个折腾了半小时，后来发现是路径里有个“项目”两个字……
- Target：这里选“Simulator”。我们还没拿到开发板，先在电脑上跑模拟器。
- Resolution：选一个分辨率。我建议选480x272，这是很多入门级屏幕的尺寸，后面移植到真实硬件时也方便。
填好后点“Create”。等几秒钟，TouchGFX Designer会帮你生成一个完整的工程骨架。
小提示：第一次创建项目时，Designer会从网上下载一些依赖文件。如果你的网络比较慢，耐心等一会儿就好。如果卡住了，检查一下是不是被防火墙拦了。
4.2 认识Designer界面
项目创建完成后，你会看到Designer的主界面。嗯，这里简单说一下布局：
- 左边是控件面板（Widgets），所有你能拖拽的UI元素都在这里。
- 中间是画布（Canvas），就是你屏幕的预览区域。
- 右边是属性面板（Properties），选中某个控件后，可以在这里调整它的位置、大小、颜色等。
- 底部是交互面板（Interactions），用来配置屏幕切换、动画触发等逻辑。
这个布局其实和很多UI设计工具很像。如果你用过Figma或者Sketch，上手会很快。
4.3 添加文本控件
好，现在我们要在屏幕上显示一行字。
- 在左边的控件面板里，找到Text Area，拖到中间的画布上。
- 选中这个Text Area，右边属性面板会显示它的属性。
- 找到Text属性，把默认的“Text”改成“Hello TouchGFX!”。
- 调整一下字体大小：找到Font属性，选一个你喜欢的字号，比如24。
- 把文字居中：找到Alignment，选“Center”。
- 调整位置：直接拖拽到屏幕中央，或者在属性面板里手动输入X和Y坐标。
嗯，这里要注意一点：TouchGFX的字体是预编译的。如果你选了一个不存在的字体大小，模拟器里可能会显示乱码或者空白。我建议先用系统自带的“Roboto”字体，大小选24、28、32这些常用值。
避坑指南：我曾经在项目里选了一个36号字体，结果模拟器里死活不显示。后来发现那个字号没有预编译，需要手动添加。初学者先用默认字号，别给自己找麻烦。
4.4 配置屏幕切换
一个项目只有一个屏幕太单调了。我们来加第二个屏幕，然后配一个按钮，点一下就能跳转。
4.4.1 添加第二个屏幕
在Designer底部的Screens面板里，你会看到默认有一个“Screen1”。点旁边的“+”号，添加一个“Screen2”。
切换到Screen2，用同样的方法拖一个Text Area进去，写上“Welcome to Screen2”。这样两个屏幕就都有了内容。
4.4.2 添加按钮
回到Screen1，从控件面板里拖一个Button到画布上。TouchGFX提供了几种默认按钮样式，选一个你喜欢的。
调整按钮的位置和大小，比如放在屏幕右下角。然后在属性面板里把按钮的文字改成“Next”。
4.4.3 配置交互
选中按钮，在底部的Interactions面板里，点“Add Interaction”。
会弹出一个配置窗口：
- Trigger：选择“Clicked”。意思是当按钮被点击时触发。
- Action：选择“Navigate to Screen”。
- Target Screen：选择“Screen2”。
- Transition：选择“Slide”。这样切换时会有滑动动画，看起来更流畅。
点“OK”保存。这样当你在模拟器里点击“Next”按钮时，就会从Screen1滑到Screen2。
小技巧：Transition类型有好几种，比如Fade、Slide、None。我个人喜欢用Slide，效果比较自然。但如果你追求极致的响应速度，用None也行。
4.5 模拟运行
配置完成，该跑起来了。
在Designer的右上角，有一个Run Simulator按钮（绿色的小三角）。点一下，TouchGFX会自动编译代码并启动模拟器。
第一次编译会稍微慢一点，因为要生成一些中间文件。等几秒钟，你会看到一个窗口弹出来，里面就是你的第一个TouchGFX应用。
你应该能看到：
- 屏幕中央显示“Hello TouchGFX!”
- 右下角有一个“Next”按钮
- 点击按钮，屏幕滑动切换到Screen2，显示“Welcome to Screen2”
如果一切正常，恭喜你，你已经完成了第一个TouchGFX项目。
核心逻辑：整个流程其实就三步——拖控件、配交互、点运行。后面所有复杂的UI，都是在这个基础上叠加出来的。
4.6 本章知识体系
为了让你更清楚地看到这一章讲了什么，我画了一张流程图。它把从创建项目到模拟运行的完整路径串起来了。
4.7 常见问题与解决
模拟运行的时候，可能会遇到一些小问题。我把常见的列出来，你遇到了可以直接对照着查。
| 问题现象 | 可能原因 | 解决方法 |
|---|---|---|
| 模拟器启动后黑屏 | 项目分辨率与模拟器窗口不匹配 | 检查项目设置里的分辨率，重新运行 |
| 文字显示为方框或乱码 | 所选字体大小未预编译 | 换一个默认字号，比如24或28 |
| 按钮点击无反应 | 交互配置未保存或触发条件错误 | 检查Interactions面板，确认Trigger为Clicked |
| 编译报错“路径包含非法字符” | 项目路径有中文或空格 | 重新创建项目，路径全英文 |
避坑指南：如果你在模拟器里点了按钮，屏幕没反应，先别急着怀疑代码。有时候是模拟器窗口没获得焦点。点一下窗口标题栏再试，往往就好了。我刚开始学的时候，因为这个浪费了十分钟。
4.8 小结
这一章我们走完了TouchGFX开发的完整流程：创建项目、拖控件、配交互、模拟运行。你亲手让屏幕上显示了一行字，还实现了屏幕切换。
说实话，这个流程看起来简单，但它背后的工程逻辑——UI设计、交互配置、代码生成、编译运行——是所有复杂项目的基础。后面我们要做的多屏幕应用、自定义控件、动画效果，都是在这个框架上叠加的。
嗯，现在你可以关掉模拟器，回到Designer里再玩一玩。试试换不同的Transition效果，或者给按钮换个颜色。多动手，手感就来了。