4、第一个TouchGFX项目：使用TouchGFX Designer创建空白工程、理解工程目录结构、配置屏幕分辨率与颜色深度、生成代码并编译。
好，到了真正动手的时候了。
前面三章我们聊了环境、聊了硬件、聊了底层驱动。说实话，那些都是铺垫。从这一章开始，你才算真正踏入了TouchGFX的世界。我个人习惯是，学一个新东西，先让它跑起来再说。别急着啃文档，先建一个工程，编译通过，看到屏幕上有点东西，心里就有底了。
4.1 打开TouchGFX Designer，创建第一个空白工程
TouchGFX Designer是ST官方提供的图形化设计工具。说白了，它就是帮你生成UI代码的脚手架。你拖拖控件，配配参数，它自动把C++代码给你写好。
打开Designer，界面很清爽。点击“Create New”按钮，你会看到几个模板选项：
- Empty UI —— 空白工程，啥都没有，最适合移植学习
- Examples —— 官方示例，功能完整但结构复杂
- Applications —— 应用模板，带一些基础交互
我们选Empty UI。为什么？因为移植阶段，你不需要任何花哨的控件。你只需要确认：屏幕能亮、触摸能响应、帧率能跑起来。这些基础验证，空白工程足够了。
点击“Create”后，Designer会让你填项目名称和路径。我建议项目名不要带中文，路径也不要太深。比如：D:\TouchGFX_Projects\MyFirstProject。嗯，这里要注意，路径里不要有空格，否则后面编译可能会出一些莫名其妙的错误。
4.2 理解工程目录结构
工程创建完成后，我们来看看它的骨架。打开项目文件夹，你会看到这样的结构：
MyFirstProject/
├── assets/
│ ├── fonts/ # 字体文件
│ ├── images/ # 图片资源
│ └── texts/ # 多语言文本
├── config/
│ └── touchgfx.cfg # 核心配置文件
├── generated/
│ └── gui/ # Designer自动生成的代码
├── gui/
│ └── src/ # 你的UI逻辑代码
├── target/
│ └── STM32F746G_DISCO/ # 板级支持包
├── CMakeLists.txt # CMake构建文件
└── project.touchgfx # Designer工程文件
我来给你拆解一下每个目录的职责：
| 目录/文件 | 作用 | 你需要关注吗？ |
|---|---|---|
assets/ |
存放UI资源，字体、图片、文本 | 后期会频繁修改 |
config/ |
TouchGFX配置，分辨率、颜色深度都在这里 | 移植时必改 |
generated/ |
Designer自动生成的代码，不要手动修改 | 只读，改了会被覆盖 |
gui/ |
你的业务逻辑代码，比如按钮响应、页面切换 | 主要开发区域 |
target/ |
板级适配层，包含LCD驱动、触摸驱动等 | 移植核心战场 |
4.3 配置屏幕分辨率与颜色深度
现在我们来干正事——配置屏幕参数。打开 config/touchgfx.cfg 文件，你会看到类似这样的内容：
# TouchGFX Configuration File
screen_width = 480
screen_height = 272
color_depth = 24
framebuffer_format = RGB888
这几个参数决定了你的UI怎么显示：
- screen_width / screen_height：你的LCD实际分辨率。我用的是一块480x272的屏，所以填这个。如果你的屏是800x480，就改过来。
- color_depth：颜色深度。常见的有16位（RGB565）和24位（RGB888）。16位省内存，但颜色过渡会有条纹；24位色彩丰富，但帧缓冲占用更大。
- framebuffer_format：帧缓冲格式，必须和颜色深度匹配。
怎么选？我给你一个参考：
| 场景 | 推荐配置 | 原因 |
|---|---|---|
| MCU内存小于512KB | RGB565（16位） | 帧缓冲减半，省内存 |
| 需要显示照片级图片 | RGB888（24位） | 色彩还原度高 |
| 你的屏只支持16位接口 | RGB565 | 硬件限制，没得选 |
改好配置后，保存文件。然后回到Designer，点击右上角的“Generate Code”按钮。Designer会根据你的配置重新生成所有代码。
4.4 生成代码并编译
点击Generate后，你会看到Designer的控制台输出一堆日志。只要没有红色报错，就说明生成成功了。
接下来，我们用命令行编译。打开终端，进入项目目录：
cd D:\TouchGFX_Projects\MyFirstProject
mkdir build
cd build
cmake ..
make -j4
解释一下这几步：
mkdir build—— 创建编译目录，保持源码干净cmake ..—— 生成Makefile，CMake会自动检测你的工具链make -j4—— 开始编译，-j4表示用4个线程并行编译，快一些
如果一切顺利，你会看到类似这样的输出：
[100%] Built target MyFirstProject.elf
嗯，看到这个就说明编译通过了。生成的.elf文件就在build目录下。
VERBOSE=1 参数，比如 make VERBOSE=1 -j4。这样能看到每条编译命令，万一报错，能快速定位是哪个文件出了问题。
4.5 知识体系总览
这一章的内容其实就围绕一个核心流程：从Designer创建工程，到配置硬件参数，再到编译通过。我画了一张图，帮你把整个逻辑串起来：
这张图把整个流程串起来了。你跟着走一遍，就能得到一个可以烧录的固件。至于烧录后屏幕亮不亮、触摸灵不灵，那是下一阶段的事。这一章，你只要确保编译通过就行。
好了，第一个TouchGFX项目已经建起来了。你有了工程骨架，知道了每个目录是干什么的，也学会了怎么配置分辨率和颜色深度。最重要的是，你亲手编译通过了一个TouchGFX工程。这一步迈出去，后面的路就好走了。