1. TouchGFX 概述与环境搭建

各位同学，欢迎来到《TouchGFX 复杂界面框架搭建》的第一章。

说实话，我第一次接触 TouchGFX 的时候，心里也犯嘀咕：这玩意儿到底能干啥？后来在几个量产项目里摸爬滚打了一圈，才真正体会到它的价值。今天咱们就从零开始，把 TouchGFX 是什么、怎么搭环境、怎么跑第一个 Demo 彻底搞清楚。

1.1 TouchGFX 是什么

TouchGFX 是一个专门为嵌入式系统打造的 GUI 框架。说白了，它帮你在资源有限的 MCU 上跑出媲美智能手机的界面效果。

我见过不少工程师用裸机画像素点做界面，那叫一个痛苦。TouchGFX 把这些脏活累活都封装好了——你只需要关心界面长什么样，底层怎么刷屏、怎么优化帧率，框架替你搞定。

1.2 TouchGFX 的架构与核心组件

要理解 TouchGFX，得先看它的分层结构。我习惯把它拆成三层：

我在项目里最深的体会是：千万别跳过 HAL 层的配置。有一次我图省事，直接用默认的 HAL 参数，结果屏幕刷新率死活上不去。后来查了半天，发现是 LTDC 的时钟分频没配对。

1.3 TouchGFX Designer 介绍

TouchGFX Designer 是个可视化界面设计工具。你拖拽控件、设置属性、绑定交互，它自动生成 C++ 代码。

Designer 的核心能力：

• 所见即所得——拖拽 Button、TextArea、Image 到画布上，实时预览效果
• 交互编辑器——点击、滑动、定时器触发，可视化配置回调
• 资源管理——图片、字体、文本翻译表统一管理
• 一键生成代码——生成 View、Presenter、Model 骨架

1.4 开发环境搭建（STM32CubeMX + TouchGFX）

环境搭建是新手最容易卡住的地方。我整理了一个清单，你照着来就行。

具体安装步骤：

1. 下载并安装 STM32CubeMX（官网免费）
2. 下载并安装 TouchGFX Designer（官网免费）
3. 在 CubeMX 中安装 TouchGFX Generator 插件（Help → Manage Embedded Software Packages）
4. 打开 CubeMX，选择你的 MCU 型号，配置时钟、LTDC、FMC、Touch 等外设
5. 在 Pinout & Configuration 中找到 TouchGFX 选项卡，启用并配置帧缓冲大小
6. 点击 "Generate Code"，CubeMX 会自动调用 Designer 并生成完整工程

1.5 第一个 Hello World 项目

理论说再多，不如跑一个 Demo 来得实在。咱们用 STM32F769I-DISCO 开发板，做一个显示 "Hello TouchGFX" 的界面。

步骤拆解：

1. 打开 TouchGFX Designer，新建项目，选择 STM32F769I-DISCO 模板
2. 在画布上拖一个 TextArea 控件
3. 在属性面板中设置文本为 "Hello TouchGFX"，字体大小 36，颜色白色
4. 设置背景色为深蓝色（#1a1a2e）
5. 点击 "Run Simulator" 预览效果
6. 确认无误后，点击 "Generate Code"
7. 在 CubeMX 中打开生成的 .ioc 文件，重新生成代码
8. 用 IDE 打开工程，编译下载到开发板

// Screen1View.cpp
#include <gui/screen1_screen/Screen1View.hpp>

Screen1View::Screen1View() {}

void Screen1View::setupScreen() {
    // 设置文本内容
    textArea1.setTypedText(TypedText(T_SINGLEUSEID1));
    textArea1.setPosition(100, 200, 400, 50);
    textArea1.setColor(colortype(0xFFFFFF));
    add(textArea1);
}

void Screen1View::tearDownScreen() {}

你想想看，就这么几行代码，一个完整的 GUI 界面就跑起来了。底层那些 LTDC 配置、DMA2D 加速、帧缓冲切换，TouchGFX 全帮你处理好了。

好了，第一章的内容就到这里。环境搭好了，Demo 跑起来了，后面咱们就可以开始真正搭建复杂界面了。