1. 引言TouchGFX 是专用于 STM32 的图形界面设计软件，可用来低成本开发优秀的图形界面，TouchGFX 现已变的越来越流行。为了帮助客户更加深入地理解和使用 TouchGFX ，本文介绍了 TouchGFX Designer 中的 Mixin 功能，从基础示例 Button Example 出发，为文本框控件添加 ClickListener (Mixin 功能中的一项)，并对源代码进行简单剖析。期望能帮助客户更深入地理解 STM32 TouchGFX 的相关功能。


2. TouchGFX ClickListener 模板的使用
2.1. C++模板编程基础
在示例介绍之前，让我们先熟悉一下 C++模板编程的一些基础知识。模板编程属于通用编程的范畴，是为“尚未确定类型”所写的函数或类。是可以产生更干净、更快速、更精明的软件的一个强力手段。
模板的优点：首先模板与某种特定类型无关，代码可重用性好；其次模板与平台无关，代码移植性好；另外模板代码在编译时才进行解释，在编译时确定检查数据类型，相比运行时检查，类型的安全性高。
模板的缺点：一是代码易读性不是很好，调试不便；二是用户工程代码中需要包含模板代码（非二进制库），编译的时间较长，二进制扩展性差；另外有可能会造成二进制代码膨胀（编译后二进制代码臃肿），我们在设计模板时，需要尽可能将 C++模板中与参数⽆关的代码分离出来。


2.2. TouchGFX Mixin 功能简介
模板一般分为函数模板和类模板。函数模板我们这里不做赘述，重点关注 TouchGFX Mixins 类模板。TouchGFX 的 Mixins 类模板用于拓展控件的功能，目前 TouchGFX v4.20.0 中有四个 Mixin 功能，分别是 Draggable、ClickListener、FadeAnimator 和MoveAnimator，分别为控件增添相关功能。如图 1 （TouchGFX Designer Mixins 功能）所示，本文主要针对 ClickListener 做具体介绍。







2.3. 基于 TouchGFX Button 例程使用 ClickListener 功能
2.3.1. TouchGFX 例程的代码生成
运行 TouchGFX Designer，选择 Examples；通过 Select Board Setup 选择STM32H735G DK 板；从众多例程中选择“Button Example”例程；将 Application name 改为 Button_Example，如下图图 2，然后点击 Create 创建工程。



进入 TouchGFX Designer 主界面后，会看到画布上有两个按钮和一个文本框，我们对界面不做更改，直接选择 Designer 右下角 (Run Target)生成代码。该操作将会复制TouchGFX 框架文件，生成配置文件、makefile、代码及资源文件（images、fonts、texts），然后编译链接、烧录目标板并运行。程序运行起来后，您可以熟悉一下该按钮例程应用。下面我们就针对该例程，为界面上的计数文本框控件注入 ClickListener 功能，应用实现“当点击计数文本框时，计数数字增加 2”的功能。


2.3.2. 为计数文本框控件添加 ClickListener 功能
我们在 TouchGFX Designer 主屏界面，点击 countTxt 文本框，然后在右侧属性栏中找到 Mixins，勾选 ClickListener，如图 3 所示。然后重新生成代码。





我们可以使用 VS code 编辑代码，或使用其它如 STM32CubeIDE 等工具编辑代码。打开 MainView.hpp，为计数文本框，添加代码如下（黄底色部分）：

1. #ifndef MAIN_VIEW_HPP
   
2. #define MAIN_VIEW_HPP
   
3. #include <gui_generated/main_screen/MainViewBase.hpp>
   
4. #include <gui/main_screen/MainPresenter.hpp>
   
5. class MainView : public MainViewBase
   
6. {
   
7. public:
   
8. MainView();
   
9. ~MainView() {};
   
10. virtual void setupScreen();
    
11. virtual void increaseValue();
    
12. virtual void decreaseValue();
    
13. void updateGFXElements();
    
14. 
    
15. void cntTextClickHandler(const TextAreaWithOneWildcard& cntTxt,
    
16. const ClickEvent& e);
    
17. protected:
    
18. private:
    
19. uint8_t count;
    
20. Callback<MainView, const TextAreaWithOneWildcard&, const
    
21. ClickEvent&> txtClickedCallback;
    
22. };
    
23. #endif // MAIN_VIEW_HPP

复制代码

完整版请查看：附件 TouchGFX 控件附加Mixin功能的方法介绍_v1.0.pdf (458.08 KB, 下载次数: 7)

2023-2-14 18:57 上传

点击文件名下载附件