Qt中兩個QLabel標簽控件重疊的方法

    在項目中遇到這樣的問題，需要開發一個電池控件，顯示電量同時又能以數字標注電量的多少。效果如下圖所示：

    通常在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的控件設置數字，效果如本文最開始的圖片所示