商品显示设计和实现

TouchGFX中设计人机界面，可以定义多个屏幕(Screen)，每个屏幕上添加部件(Widget)和容器(Container)实现具体UI布局和对应功能。每个屏幕可以定义交互动作(Intercaction)来实现自定义的事件，实现交互功能。利用TouchGFX支持的功能，可以设计出功能明确、代码结构清晰的UI代码。以下对商品显示GUI相关部分的设计进行介绍。

商品显示设计

商品需要显示商品示意图、商品名称和价格、用于调整购买数量的按键和数量显示。其中商品示意图使用TouchGFX中的image部件来显示。

开发板屏幕的分辨率为480x272，显示的图片分辨率使用80x80。

用于显示的图片放置到工程的TouchGFX\assets\images路径中，需要进行图片分类时，将一个类别的图片存放到同一个文件夹中。

在设置部件的图片属性时，选择添加到工程中的图像。

通过左右两个带图标的按键实现商品数量的调节。

在容器的Interaction中定义按键的响应函数，更新当前商品的数量，并更新到用于显示的文本框内。

单个商品显示设计可以通过复制粘贴来实现多个商品显示设计。另外可以通过自定义容器的方法来实现更为通用的自定义部件，提高代码的复用性。添加一个水平显示4个商品的自定义容器，并指定容器的名称和显示区域大小。

容器对应的Interaction中包含对应按键的交互动作，设置当按键按下时调用自定义的虚函数。

以上通过TouchGFX的图形化界面添加部件到容器中，设置交互动作信息，完成UI部分的布局，实现用户自定义的UI组件，是TouchGFX设计中的重要方法。

点击右下角的生成代码按键，可以得到对应的源代码，在其中添加自定义代码实现具体的功能。

生成的代码主要在generated/gui_generated和gui文件夹，前者的文件内容是自动生成的，用户不能修改，后者是用于添加用户自定代码的文件。

由于之前添加的Interaction中定义调用虚函数，需要在代码中对虚函数进行重写，实现具体的功能。以上设置的虚函数可以在BoardSelectBash.hpp中找到对应的虚函数定义。

class BoardSelectBase : public touchgfx::Container
{
public:
    BoardSelectBase();
    virtual ~BoardSelectBase();
    virtual void initialize();

    /*
     * Virtual Action Handlers
     */
    virtual void buttonMinusClicked()
    {
        // Override and implement this function in BoardSelect
    }
    virtual void buttonAddClicked()
    {
        // Override and implement this function in BoardSelect
    }
    virtual void buttonMinusClicked1()
    {
        // Override and implement this function in BoardSelect
    }
    virtual void buttonAddClicked1()
    {
        // Override and implement this function in BoardSelect
    }
    virtual void buttonMinusClicked2()
    {
        // Override and implement this function in BoardSelect
    }
    virtual void buttonAddClicked2()
    {
        // Override and implement this function in BoardSelect
    }
    virtual void buttonMinusClicked3()
    {
        // Override and implement this function in BoardSelect
    }
    virtual void buttonAddClicked3()
    {
        // Override and implement this function in BoardSelect
    }
    ....
}

根据提示，在BoardSelect.hpp中添加以上虚函数的声明，在BoardSelect.cpp中重写函数，实现修改选中商品的购买数量。

BoardSelect.hpp中的声明和用于保存购买数量的成员变量

class BoardSelect : public BoardSelectBase
{
public:
    BoardSelect();
    virtual ~BoardSelect() {}

    virtual void initialize();
    virtual void buttonMinusClicked();
    virtual void buttonAddClicked();
    virtual void buttonMinusClicked1();
    virtual void buttonAddClicked1();
    virtual void buttonMinusClicked2();
    virtual void buttonAddClicked2();
    virtual void buttonMinusClicked3();
    virtual void buttonAddClicked3();

protected:

private:
    int cacheOrderNum;
    int cacheOrderNum1;
    int cacheOrderNum2;
    int cacheOrderNum3;
};

BoardSelect.cpp中的对第一组按键的增加和减少商品功能的代码。

void BoardSelect::buttonMinusClicked()
{
    if(cacheOrderNum>0)
        cacheOrderNum--;
    Unicode::snprintf(OrderNumBuffer,10,"%d",cacheOrderNum);
    OrderNum.invalidate();
}

void BoardSelect::buttonAddClicked()
{
    if(cacheOrderNum<10)
        cacheOrderNum++;
    Unicode::snprintf(OrderNumBuffer,10,"%d",cacheOrderNum);
    OrderNum.invalidate();
}
.....

总结

使用TouchGFX的图形化工具可以快速完成GUI的布局设计、部件添加以及GUI交互设置。在生成的代码中通过重写虚函数来实现具体的交互功能，TouchGFX使用C++作为编程语言，语言特性更多，熟练后使用TouchGFX编写GUI程序是不错的选择。

不错，后边项目成品可以发创客秀哈

STMCU-管管 发表于 2025-10-27 09:39
不错，后边项目成品可以发[创客秀](<a href="https://shequ.stmicroelectronics.cn/forum.php?mod=forumdisplay">https://shequ.stmicroelectronics.cn/forum.php?mod=forumdisplay</a>&amp; ...

[md]好的，现在这里发开发过程，后面在那边发成品。