容器接口设计

https://shequ.stmicroelectronics.cn/thread-868781-1-1.html

https://shequ.stmicroelectronics.cn/thread-868774-1-1.html

中介绍使用TouchGFX的图像、文字和按键部件实现商品显示、数量调整等功能，在程序设计时，涉及多个商品显示时，将以上代码进行复用是必须的。在TouchGFX中，将以上部件集成到Container中即可实现复用。

Container输出

TouchGFX的Container选项卡提供Container管理的功能，在其中添加部件、设置Container属性和交互动作。

设计完成后，点击右下角的生成代码按键，输出GUI相关的代码。TouchGFX使用的编程语言是C++，生成的代码由自动生成更新的基类文件和用户自定义的继承类两部分组成。

Container自定义

基类是由TouchGFX Designer自动生成并更新，其中的代码用户不能修改。在继承类代码中添加自定义的代码有两种方式，一种是重写基类中定义的虚函数，另一种是在继承类中添加成员函数。

https://shequ.stmicroelectronics.cn/thread-868774-1-1.html 中对前一种实现重写函数的说明，实现按键调节商品数量的功能。

在继承类代码的BoardSelect类中添加以下的成员函数声明，实现更新商品图像、板卡名称、部件可见性的功能。

enum ItemIndex{
    first=1,
    second=2,
    third=3,
    fourth=4
};

void updateboardimage(BitmapId iconid,ItemIndex index);
void updateallimage(BitmapId* iconids);
void setiteminvisible(ItemIndex index);
void setBoardname(TypedTextId textid,ItemIndex index);

在BoardSelect.cpp中添加以上函数的实现，updateboardimage和updateallimage实现更新图像部件的图片。

void BoardSelect::updateboardimage(BitmapId iconid,ItemIndex index)
{
    switch(index)
    {
    case first:
        BoardImage.setBitmap(Bitmap(iconid));
        BoardImage.invalidate();
        break;
    case second:
        BoardImage_1.setBitmap(Bitmap(iconid));
        BoardImage_1.invalidate();
        break;
    case third:
        BoardImage_2.setBitmap(Bitmap(iconid));
        BoardImage_2.invalidate();
        break;
    case fourth:
        BoardImage_3.setBitmap(Bitmap(iconid));
        BoardImage_3.invalidate();
        break;
    }
}

void BoardSelect::updateallimage(BitmapId* iconids)
{
    updateboardimage(iconids[0],first);
    updateboardimage(iconids[1],second);
    updateboardimage(iconids[2],third);
    updateboardimage(iconids[3],fourth);
}

setBoardname实现设定开发板名称Text部件的字符串。

void BoardSelect::setBoardname(TypedTextId textid,ItemIndex index)
{
    switch(index)
    {
    case first:
        BoardNameText.setTypedText(touchgfx::TypedText(textid));
        BoardNameText.invalidate();
        break;
    case second:
        BoardNameText_1.setTypedText(touchgfx::TypedText(textid));
        BoardNameText_1.invalidate();
        break;
        break;
    case third:
        BoardNameText_2.setTypedText(touchgfx::TypedText(textid));
        BoardNameText_2.invalidate();
        break;
        break;
    case fourth:
        BoardNameText_3.setTypedText(touchgfx::TypedText(textid));
        BoardNameText_3.invalidate();
        break;
        break;
    }   
}

对于不需要显示的部件，提供setiteminvisible用于设定显示部件的可见属性。

void BoardSelect::setiteminvisible(ItemIndex index)
{
    switch(index)
    {
    case first:
        BoardImage.setVisible(false);
        OrderNum.setVisible(false);
        BoardNameText.setVisible(false);
        CountMinusButton.setVisible(false);
        CountAddButton.setVisible(false);

        BoardImage.invalidate();
        OrderNum.invalidate();
        BoardNameText.invalidate();
        CountMinusButton.invalidate();
        CountAddButton.invalidate();

        break;
    case second:
        BoardImage_1.setVisible(false);
        OrderNum_1.setVisible(false);
        BoardNameText_1.setVisible(false);
        CountMinusButton_1.setVisible(false);
        CountAddButton_1.setVisible(false);

        BoardImage_1.invalidate();
        OrderNum_1.invalidate();
        BoardNameText_1.invalidate();
        CountMinusButton_1.invalidate();
        CountAddButton_1.invalidate();

        break;
    case third:
        BoardImage_2.setVisible(false);
        OrderNum_2.setVisible(false);
        BoardNameText_2.setVisible(false);
        CountMinusButton_2.setVisible(false);
        CountAddButton_2.setVisible(false);

        BoardImage_2.invalidate();
        OrderNum_2.invalidate();
        BoardNameText_2.invalidate();
        CountMinusButton_2.invalidate();
        CountAddButton_2.invalidate();

        break;
    case fourth:
        BoardImage_3.setVisible(false);
        OrderNum_3.setVisible(false);
        BoardNameText_3.setVisible(false);
        CountMinusButton_3.setVisible(false);
        CountAddButton_3.setVisible(false);

        BoardImage_3.invalidate();
        OrderNum_3.invalidate();
        BoardNameText_3.invalidate();
        CountMinusButton_3.invalidate();
        CountAddButton_3.invalidate();

        break;
    }    
}

Container输出

Container可以通过导出tpkg模板文件用于不同工程使用，通过使用这一方式，实现用户自定义控件，在不同工程中使用。

总结

自定义容器是TouchGFX中实现用户自定义GUI控件的重要方式，提高代码的模块化和复用率。

零售界面咋不搞得好看点