在项目中遇到这样的问题,需要开发一个电池控件,显示电量同时又能以数字标注电量的多少。效果如下图所示:

   

    通常在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的控件设置数字,效果如本文最开始的图片所示

 

posted on 2023-09-03 10:07  Recreate  阅读(1231)  评论(0编辑  收藏  举报