使用ScollList实现滑动商品浏览界面

STM32H750DK的屏幕是480x272，GUI布局设计时，一行可以显示四个商品。

STM32H750DK智能零售界面设计——4自定义Container接口设计和实现 - ST中文论坛活动 ST意法半导体中文论坛

中设计的Container是在一行中显示四个商品，为显示更多的商品，采用TouchGFX中ScrollList控件来显示多行商品并实现上下滑动查看更多商品的功能。

ScrollList设置和使用

在TouchGFX的控件菜单中选择并添加ScrollList控件

在右侧的ScrollList的属性栏中对其属性进行设置，比如ScrollList名称、滚动方向、项目对应的容器模板、项目数量、动画效果参数等。

设置完成并生成代码。ScrollList控件在ShopScreen屏幕上，生成代码的基类文件为ShopScreenViewBase.cpp/hpp，继承类文件为ShopScreeView.cpp/hpp，开发者在继承类文件中添加该控件的自定义代码，ScrollList控件说明文档中指出开发者需要在对应的继承类中重写scollListxxUpdateItem函数，实现具体的函数功能。

在ShopScreen中添加scrollListC0、scrollListF4、scrollListH7三个控件用于显示不同系列的开发板。其中scrollListF4和scrollListH7初始化为不可见。

在生成的ShopScreeView.hpp中添加scollListxxUpdateItem虚函数声明

class ShopScreenView : public ShopScreenViewBase
{
public:
    ShopScreenView();
    virtual ~ShopScreenView() {}
    virtual void setupScreen();
    virtual void tearDownScreen();

    virtual void scrollListC0UpdateItem(BoardSelect& item, int16_t itemIndex);
    virtual void scrollListF4UpdateItem(BoardSelect& item, int16_t itemIndex);
    virtual void scrollListH7UpdateItem(BoardSelect& item, int16_t itemIndex);
    ...
protected:
};

在ShopScreeView.cpp中调用BoardSelect容器类的接口函数实现scrollList项目更新时对应GUI的更新。

void ShopScreenView::scrollListC0UpdateItem(BoardSelect& item, int16_t itemIndex)
{
    switch(itemIndex)
    {
    case 0:
        item.updateallimage(C0_group);
        item.setBoardname(T_IDC031,first);
        item.setBoardname(T_IDC051,second);
        item.setBoardname(T_IDC071,third);
        item.setBoardname(T_IDC092,fourth);
        break;
    default:
        break;
    }

}

void ShopScreenView::scrollListF4UpdateItem(BoardSelect& item, int16_t itemIndex)
{
    switch(itemIndex)
    {
    case 0:
        item.updateallimage(F4_group1);
        item.setBoardname(T_IDF401RB,first);
        item.setBoardname(T_IDF410RB,second);
        item.setBoardname(T_IDF411RE,third);
        item.setBoardname(T_IDF412ZG,fourth);
        break;
    case 1:
        item.updateallimage(F4_group2);
        item.setBoardname(T_IDF413ZH,first);
        item.setBoardname(T_IDF429ZI,second);
        item.setBoardname(T_IDF439ZI,third);
        item.setBoardname(T_IDF446RE,fourth);
        break;
    case 2:
        item.updateboardimage(F4_group3,first);
        item.setBoardname(T_IDF446ZE,first);
        item.setiteminvisible(second);
        item.setiteminvisible(third);
        item.setiteminvisible(fourth);
        break;
    default:
        break;
    }

}
void ShopScreenView::scrollListH7UpdateItem(BoardSelect& item, int16_t itemIndex)
{
    switch(itemIndex)
    {
    case 0:
        item.updateallimage(H7_group1);
        item.setBoardname(T_IDH723ZG,first);
        item.setBoardname(T_IDH743ZI,second);
        item.setBoardname(T_IDH743ZI2,third);
        item.setBoardname(T_IDH745ZI_Q,fourth);
        break;
    case 1:
        item.updateallimage(H7_group2);
        item.setBoardname(T_IDH753ZI,first);
        item.setBoardname(T_IDH755ZI_Q,second);
        item.setBoardname(T_IDH7A3ZI_Q,third);
        item.setBoardname(T_IDH7S3L8,fourth);
        break;
    default:
        break;
    }

}

总结

通过自定义Container实现用户自定义控件，结合ScollList可以快速实现滑动列表的效果。