使用RadioButton实现不同类别商品查看

不同类别的开发板实现分类显示功能，当选中类别标签时，在屏幕上显示该类别开发板的选项，在TouchGFX中采用RadioButton来实现不同类别开发板的显示切换功能。

RadioButton设置以及相关代码

通过工具栏的Button选项卡添加RadioButton控件

使用三个RadioButton来切换显示C0系列、F4系列和H7系列的开发板。

在RadioButton属性设置界面，设置RadioButton的名称、初始选中状态、所属分组以及按键在不同状态时显示的图片。

三个按键属于同一个分组，在初始状态中，radioButtonC0处于选中状态，表示初始化时显示C0系列开发板。添加RadioButton后，在所在的屏幕中添加Interaction设置RaidoButton选中时调用自定义的虚函数。

完成以上的设置并生成代码，在基类头文件ShopScreenViewBase.hpp可以找到虚函数的声明。

class ShopScreenViewBase : public touchgfx::View<ShopScreenPresenter>
{   
    ...
    /*
     * Virtual Action Handlers
     */
    virtual void radioButtonC0Selected()
    {
        // Override and implement this function in ShopScreen
    }
    virtual void radioButtonF4Selected()
    {
        // Override and implement this function in ShopScreen
    }
    virtual void radioButtonH7Selected()
    {
        // Override and implement this function in ShopScreen
    }
    ...
}

继承类头文件ShopScreeView.hpp,添加需要重写的虚函数的声明。

class ShopScreenView : public ShopScreenViewBase
{
public:
    ShopScreenView();
    virtual ~ShopScreenView() {}
    virtual void setupScreen();
    virtual void tearDownScreen();
    ...
    virtual void radioButtonC0Selected();
    virtual void radioButtonF4Selected();
    virtual void radioButtonH7Selected();
}

RadioButton选中时，显示对应的开发板内容，用于显示开发板信息的控件是ScrollList，调用ScrollList的成员函数setvisible(false/true)可以修改ScrollList的可见性，从而实现不同开发板显示窗口的切换效果。在继承类源文件ShopScreeView.cpp中，重写以上虚函数实现界面切换效果的函数。

void ShopScreenView::radioButtonC0Selected()
{
    // Override and implement this function in ShopScreen
    scrollListC0.setVisible(true);
    scrollListF4.setVisible(false);
    scrollListH7.setVisible(false);
    scrollListC0.invalidate();

}
void ShopScreenView::radioButtonF4Selected()
{
    // Override and implement this function in ShopScreen
    scrollListC0.setVisible(false);
    scrollListF4.setVisible(true);
    scrollListH7.setVisible(false);
    scrollListF4.invalidate();
}
void ShopScreenView::radioButtonH7Selected()
{
    // Override and implement this function in ShopScreen
    scrollListC0.setVisible(false);
    scrollListF4.setVisible(false);
    scrollListH7.setVisible(true);
    scrollListH7.invalidate();
}

总结

商品浏览界面的设计在TouchGFX中通过屏幕(Screen)、部件(Wigdget)和(Container)实现界面的布局，使用交互动作(Intercation)定义交互事件，利用这些特性，设计UI变得简洁明了，根据MVP框架添加相关的功能代码，实现不同种类商品的浏览和界面跳转功能。