TouchGFX 是專用于 STM32 的圖形界面設計軟件，可用來低成本開發優秀的圖形界面，TouchGFX 現已變的越來越流行。為了幫助客戶更加深入地理解和使用 TouchGFX ，本文介紹了 TouchGFX Designer 中的 Mixin 功能，從基礎示例 Button Example 出發，為文本框控件添加 ClickListener (Mixin 功能中的一項)，并對源代碼進行簡單剖析。期望能幫助客戶更深入地理解 STM32 TouchGFX 的相關功能。

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 做具體介紹。

圖1. TouchGFX Designer Mixins 功能

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 創建工程。

圖2.TouchGFX Designer 生成 Button Example 例程

進入 TouchGFX Designer 主界面后，會看到畫布上有兩個按鈕和一個文本框，我們對界面不做更改，直接選擇 Designer 右下角 (Run Target)生成代碼。該操作將會復制TouchGFX 框架文件，生成配置文件、makefile、代碼及資源文件（images、fonts、texts），然后編譯鏈接、燒錄目標板并運行。程序運行起來后，您可以熟悉一下該按鈕例程應用。下面我們就針對該例程，為界面上的計數文本框控件注入 ClickListener 功能，應用實現“當點擊計數文本框時，計數數字增加 2”的功能。

2.3.2. 為計數文本框控件添加 ClickListener 功能

我們在 TouchGFX Designer 主屏界面，點擊 countTxt 文本框，然后在右側屬性欄中找到 Mixins，勾選 ClickListener，如圖 3 所示。然后重新生成代碼。

圖3.TouchGFX Designer, 計數文本框 mixin ClickListener 功能

我們可以使用 VS code 編輯代碼，或使用其它如 STM32CubeIDE 等工具編輯代碼。打開 MainView.hpp，為計數文本框，添加代碼如下（黃底色部分）：

然后我們轉到 MainView.cpp 文件，首先將 txtClickedCallback 對象與 MainView的 cntTextClickHandler（文本框點擊處理函數）綁定，這是在 MainView 類的構造函數中初始化列表中實現的。將 txtClickedCallback 加入初始化列表中，參數使用指向MainView 中 cntTextClickHandler 函數的函數指針。我們還需要修改 setupScreen 函數，在這里為 countTxt 添加 ClickAction，參數使用 txtClickedCallback, 以實現在主屏界面創建時，將 countTxt 文本框的點擊事件與 txtClickedCallback 對象綁定在一起。另外我們還需要實現 cntTextClickHandler，具體代碼如下：

修改完成后，保存，編譯，運行。您將會發現當每次點擊 countTxt 文本框時，文本框計數會增加 2。至此，我們已經實現了為文本框控件加入 ClickListener 的功能。大家可以看到，在 TouchGFX 應用中使用 ClickListener 類模板做開發是十分便捷的，代碼量也較小。下面我們對代碼進一步解讀。

2.3.3. ClickListener 模板代碼

ClickListener 類模板是 TouchGFX 框架的一部分，封裝在 ClickListener.hpp 中，代碼如下：

ClickListener 是一個標準的類模板。所謂類模板，就是“包含一個或多個尚未確定類型”的類。必須將具體類型當作模板參數傳入，才可使用。當傳入模板參數后，該類模板便以你所指定的參數類型，由編譯器進行實例化。將具體類型傳入到類模板進行實例化，我們會得到一個新的 ClickListener 類，轉變為從傳入參數（某待定的類）的派生類。

在生成的代碼 MainViewBase.hpp 中（MainView 是 MainViewBase 的派生類），我們可以找到 countTxt 的聲明：

touchgfx::ClickListener< touchgfx::TextAreaWithOneWildcard > countTxt;

這里，該模板示例類是從 TextAreaWithOneWildcard 類（即原計數文本框類型）繼承下來的。如果您選擇的不是為文本框增加 ClickListener 功能，而是其它控件，則新的ClickListener 實例類將派生自您所用的控件。本例中的繼承關系如下：

該 ClickListener 實例類是 TextAreaWithOneWildcard 類的派生類，不僅僅繼承了TextAreaWithOneWildcard 的屬性與方法，另外還添加了一個 GenericCallback 指針變量clickAction，該指針由附加的 setClickAction 方法賦值。由另一個方法 handleClickEvent使用，在 handleClickEvent 中在響應 Click 事件時，會調用該 clickAction。（關于callback 類的使用，我們這里不做贅述，如果您需要進一步了解，請參考 TouchGFX 相關文檔）。

2.3.4. ClickListener 模板應用

我們清楚了 ClickListener 類模板的原理后，回頭來看例子中的 ClickListener 的應用代碼，就會發現其邏輯十分清晰。

首先在 MainView.hpp 中聲明了一個 Callback txtClickedCallback, 和一個事件處理函數 cntTextClickHandler。在 MainView.cpp 中初始化該 txtClickedCallback, 將其與cntTextClickHandler 關聯，即實現當調用該 Callback 時，會轉到 cntTextClickHandler 進行處理。

再在 setupScreen 函數中調用 ClickListener 類模板接口 setClickAction 將txtClickedCallback 的地址賦給 ClickListener 實例化類的 clickAction 指針。則ClickListener 實例化類（這里即 TextAreaWithOneWildcard 類的派生類）在處理ClickEvent 時就會執行到 txtClickedCallback 關聯的處理函數 cntTextClickHandler

最后需要實現 MainView 類中的 Click 事件處理函數 cntTextClickHandler，這里的實現為：當 Click 事件類型為“Click 按鍵釋放”時調用 increaseValue 函數兩次。

TouchGFX 是 STM32 專用的界面設計工具，功能強大且易用。本文選擇了 Mixins 功能進行簡介，從基礎示例 Button Example 出發，動手添加 ClickListener (Mixin) 功能，并從源代碼的角度淺析了 ClickListener 類模板的使用，助力客戶更深入地理解 STM32 TouchGFX。