购物清单项设计

购物清单包含多个清单项，对于这种情况，通过设计一个清单项显示的容器，配合ScrollList即可实现购物清单的查看功能。

清单项显示容器设计

购物清单显示每一个商品项时，需要显示商品图片、名称、数量以及价格。通过定义一个实现这些功能的Container，自定义用于显示商品项的用户控件。根据显示需要，使用一个Image控件用于显示商品图片、一个Text控件用于显示开发板名称、两个按键用于调节商品数量、两个使用通配符的Text控件用于显示商品数量和价格。

由于购物清单在系统初始化时为空，所以设置容器中控件为初始不可见。

在容器的Interaction中添加按键点击触发调用虚函数，用于实现调节商品数量。

生成的基类代码头文件BillItemBase.hpp中有相关的虚函数声明

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

    /*
     * Virtual Action Handlers
     */
    virtual void CountMinus()
    {
        // Override and implement this function in BillItem
    }
    virtual void CountAdd()
    {
        // Override and implement this function in BillItem
    }
    ...
}

在对应的继承类头文件BillItem.hpp代码中添加虚函数声明

class BillItem : public BillItemBase
{
public:
    BillItem();
    virtual ~BillItem() {}

    virtual void initialize();

    virtual void CountMinus();
    virtual void CountAdd();
protected:
};

在对应的继承类源文件BillItem.cpp代码中重写函数的定义，实现修改商品数量的功能。

void BillItem::CountMinus()
{
    if(billcount>0)
        billcount--;
    Unicode::snprintf(OrderNumBuffer,10,"%d",billcount);
    OrderNum.invalidate();    

}

void BillItem::CountAdd()
{
    if(billcount<10)
        billcount++;
    Unicode::snprintf(OrderNumBuffer,10,"%d",billcount);
    OrderNum.invalidate();    
}

到此用于显示结算清单商品信息的容器设计初步完成。

结算页面滚动列表设计

显示多个结算清单中的商品，使用ScorllList实现这一功能，ScollList的属性Item Template属性中选择上面设计的BillItem作为模板，设置项目数量为10个。这样做限制订单中最多包含10个不同的商品。

在界面上添加一个Text控件，文本设置为“Total”，一个使用通配符的Text控件来显示清单中商品的总价。

总结

通过自定义Container实现显示结算清单中单个商品信息的自定义控件，结合ScollList实现清单中多个商品的信息查看和管理。TouchGFX设计中，Container的使用是创建用户自定义应用不可或缺的选择。