用QT實現整體換(huan)膚
時間(jian)：2018-09-28 來源(yuan)：未知
所需工具：QT Creator 5.7
前言：
本文主要討論如何將一個QT APP中(zhong)的所有控件進(jin)行整體換(huan)膚的功能。
探討：
近(jin)由于項目需求，我(wo)研究(jiu)了一下如何(he)將一個(ge)QT APP的所有控件進行整體的換膚(fu)功能。
傳統：
如果按(an)照(zhao)傳統的(de)更(geng)換(huan)每一(yi)個控(kong)件(jian)的(de)圖像，那么面臨的(de)問題(ti)是(shi)代碼繁(fan)多，手續繁(fan)瑣。如果這個APP中有100個控(kong)件(jian)，那么豈不是(shi)要重寫100次畫(hua)圖的(de)代碼？所以我們需(xu)要一(yi)個統籌整個APP的(de)控(kong)件(jian)。
樣式表：
經過尋(xun)找(zhao)，我在QT Assiant中尋(xun)找(zhao)到了一個函數setStyleSheet();
這個(ge)方法(fa)(fa)是QApplation中的一(yi)個(ge)方法(fa)(fa)。主要功能是使用(yong)“樣(yang)式表”來實(shi)現相應的圖片渲(xuan)染(ran)。
什(shen)么是(shi)樣式表呢？
同樣是在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
也就是說“樣式表”本(ben)身(shen)是一(yi)個(ge)CSS語言。
所(suo)以(yi)我們(men)在按照CSS語言來(lai)書寫一段CSS代碼吧！(在QT中我們(men)成為qss語言)
我們(men)來書寫一個文件(jian)叫：my.qss 并且把它加(jia)入(ru)到QT APP中(zhong)的(de)資(zi)源文件(jian)
QWidget{
/*背景圖片,無法隨著部件的大小(xiao)來自動縮放*/
background-image: url(:/res/image/common/background.png);
/*設置邊框圖片(pian),實現隨著部件的大(da)小(xiao)來自動(dong)縮放,會繪制在背景之上*/
border-image: url(:/res/image/common/background.png);
}
QPushButton{
/*背景顏色(se)*/
; background-color: rgba(100, 225, 100, 30);
/*邊框樣式(shi)為沉進(jin)去*/
border-style:inset;
/*邊框寬度為4個像(xiang)素*/
border-width:4px;
/*邊框圓(yuan)角(jiao)半徑為10個像素*/
border-radius:10px;
/*邊(bian)框顏色*/
border-color: rgba(100, 125, 15, 30);
/*字(zi)體*/
font:bold 9px "新宋體";
/*字(zi)體(ti)顏色*/
color: rgba(0, 0, 0, 100);
/*填襯(chen)*/
padding:6px;
}
…
然后我(wo)們要給APP 安裝一下樣式表：
下列代碼(ma)書寫(xie)到APP中(zhong)某個(ge)能夠(gou)被運行的代碼(ma)：
//==============使用樣式表(biao)文件(jian)==============
QFile t_styleSheetFile(":/my.qss");
//以只讀方式打開(kai)文件
t_styleSheetFile.open(QFile::ReadOnly);
//讀取文件(jian)所有(you)內容(rong),用tr()函數(shu)將其轉換為QString類型
QString m_styleSheet = t_styleSheetFile.readAll();
//為QApplication設置樣式表
qApp->setStyleSheet(m_styleSheet);
我(wo)們來看(kan)一下代碼的實現(xian)效(xiao)果：
你會(hui)發現本APP中(zhong)所有的控件，都會(hui)按(an)照你的qss文件中(zhong)的指定進(jin)行布置(zhi)。
