所需工具:QT Creator 5.7
前言:
本文主要討論如何將一個QT APP中的所有控件進行整體換膚的功能。
探討:
近由于項目需求,我研究了一下如何將一個QT APP的所有控件進行整體的換膚功能。
傳統:
如果按照傳統的更換每一個控件的圖像,那么面臨的問題是代碼繁多,手續繁瑣。如果這個APP中有100個控件,那么豈不是要重寫100次畫圖的代碼?所以我們需要一個統籌整個APP的控件。
樣式表:
經過尋找,我在QT Assiant中尋找到了一個函數setStyleSheet();
這個方法是QApplation中的一個方法。主要功能是使用“樣式表”來實現相應的圖片渲染。
什么是樣式表呢?
同樣是在QT Assiant中,我們找到了相關的說明:
The concepts, terminology, and syntax of Qt Style Sheets are heavily inspired by HTML Cascading Style Sheets (CSS) but adapted to the world of widgets
也就是說“樣式表”本身是一個CSS語言。
所以我們在按照CSS語言來書寫一段CSS代碼吧!(在QT中我們成為qss語言)
我們來書寫一個文件叫:my.qss 并且把它加入到QT APP中的資源文件
QWidget{
/*背景圖片,無法隨著部件的大小來自動縮放*/
background-image: url(:/res/image/common/background.png);
/*設置邊框圖片,實現隨著部件的大小來自動縮放,會繪制在背景之上*/
border-image: url(:/res/image/common/background.png);
}
QPushButton{
/*背景顏色*/
background-color: rgba(100, 225, 100, 30);
/*邊框樣式為沉進去*/
border-style:inset;
/*邊框寬度為4個像素*/
border-width:4px;
/*邊框圓角半徑為10個像素*/
border-radius:10px;
/*邊框顏色*/
border-color: rgba(100, 125, 15, 30);
/*字體*/
font:bold 9px "新宋體";
/*字體顏色*/
color: rgba(0, 0, 0, 100);
/*填襯*/
padding:6px;
}
…
然后我們要給APP 安裝一下樣式表:
下列代碼書寫到APP中某個能夠被運行的代碼:
//==============使用樣式表文件==============
QFile t_styleSheetFile(":/my.qss");
//以只讀方式打開文件
t_styleSheetFile.open(QFile::ReadOnly);
//讀取文件所有內容,用tr()函數將其轉換為QString類型
QString m_styleSheet = t_styleSheetFile.readAll();
//為QApplication設置樣式表
qApp->setStyleSheet(m_styleSheet);
我們來看一下代碼的實現效果:
你會發現本APP中所有的控件,都會按照你的qss文件中的指定進行布置。