米尔电子HMI试用报告#7——直流充电桩充电界面（二）

idiy

界面布局与显示

应用入口

前面已经添加了一个　LED 测试应用，现在再来添加一个应用，如下图：



动态显示/清除界面内容

在主界面容器内，采取动态增加/关闭控件的方法来对不同的界面进行切换。

采用QList来存储各界面的控件信息：

1. QList<vLayoutList*>mWidgetList[layoutTotal];
   

复制代码

layoutClear()清除前一个界面的显示：

1. void SystemContentWidget::layoutClear()
   
2. {
   
3.     QLayoutItem *item = nullptr;
   
4.     while(nullptr!=(item = mainLayout->takeAt(0)))
   
5.     {
   
6.         item->widget()->close();
   
7.         item = nullptr;
   
8.     }
   
9. }
   

复制代码

layoutAddWidgetByList()在清除前一个界面显示之后，显示指定QList存储的控件：

1. void SystemContentWidget::layoutAddWidgetByList(QList<vLayoutList*>wList)
   
2. {
   
3.     layoutClear();
   
4.     for(int i=0;i<wList.size();++i)
   
5.     {
   
6.         auto var = wList.at(i);
   
7.         var->w->show();
   
8.         mainLayout->addWidget(var->w, var->p);
   
9.     }
   
10. }
    

复制代码

待机界面显示

• 显示字符串“扫描二维码充电”
• 显示二维码
  

启动充电界面显示

• 显示字符串“启动充电”
• 显示一幅动画
  

正在充电界面显示

• 显示字符串“正在充电”
• 显示充电参数
• 显示“结束充电”按钮
• 点击“结束充电”按钮可跳转到停止充电界面
  

停止充电界面显示

• 显示字符串“停止充电”
• 显示图片
  

这样，充电桩充电应用的4个界面就完成了。进一步的，可以添加串口协议来控制界面切换了。

swiftman

厉害哦