在项目中遇到这样的问题,需要开发一个电池控件,显示电量同时又能以数字标注电量的多少。效果如下图所示:
通常在Qt中图片的显示是用的QLabel标签控件。根据以往MFC开发的经验,想当然的是两个标签控件重叠排放,下面的标签控件显示图片,上面的标签控件显示数字。
但在Qt中发现,两个QLabel重叠时,加上布局就变成水平排列或垂直排列了。
搜索网上的方案,最常见的有两种:
1. 自绘控件,这样最灵活。
2. 通过样式表,setStyleSheet 来实现
以上两种方案不多描述,自行上网搜索即可。下面要讲述的是一种非官方的实现方法,看实现过程感觉Qt也不支持这样做。不过实现效果确实简单有效,特此记录下。
实现原理就是以 QWidget/QFrame 等容器控件做为显示图片的控件,在其上放置QLabel标签控件做为显示数字的控件。然后修改 .ui 文件,强行将 QWidget/QFrame改
成QLabel标签控件,这样在Qt设计器里就能看到两个QLabel标签控件重叠在一起了。以下是操作截图:
1. 在主界面放置一个QFrame和QLabel,并修改相关属性,使QLabel在QFrame居中显示
2. 修改布局,使QLabel在QFrame中居中,并随QFrame大小改变
3. 修改QFrame的属性
4. 修改QLabel的属性
5. 保存并关闭Qt设计器
6. 打开项目文件所在的路径,修改QFrame父窗口的ui文件
7. 找到QFrame标签处,修改为QLabel,保存关闭
8. 重新打开Qt设计器,可以发现已经有两个QLabel控件了
9. 经过以上步骤,就可以将frame的控件setPixmap函数设置图片,label的控件设置数字,效果如本文最开始的图片所示