QT自定義精美換膚界面

陸陸續續用QT開發過不少項目，也用QT寫過很多私活項目，也寫過N個工具，一直求之不得能像VC同樣能夠很方便的有個自定義的界面，QSS的強大讓我看到了很好的但願，展轉百度谷歌無數次，一直搜索QT相關的換膚文章，絕大部分的是一些簡單的按鈕文本樣式，要作到總體換膚程度幾乎不行，QTCN論壇裏的奮鬥的孩子寫了個模仿360安全衛士系列，讓我既驚喜有遺憾，驚喜的是可以用QT實現一個這麼完整的360安全衛士界面，確實不錯，也支持多種換膚，遺憾的是我下載過的是VC版本的，對於一直執着於用Qt Creator 來開發的我來講，不大喜歡，工程文件之多之複雜，對於追求精簡美的我來講更是以爲彆扭，固然源碼學習參考價值仍是很高的，只是我的不大喜歡而已。陸續看過slientman的QT總體換膚方案，連接地址：http://blog.csdn.net/slientman/article/details/5618950也從CSDN下過該可執行文件，也不知道是做者粗心仍是故意，竟然沒有自帶QT運行庫，致使我電腦上試過幾個版本的運行庫都不行，做者也說了，花了不少精力，不打算開源，這個對於喜歡分享的我來講，內心又是一睹，不過本人仍是帶着誠意加過做者QQ，願意自費購買一套，也一直沒有獲得做者的回覆，有點失望。後面又在博客園裏面看到24K純開源（http://www.cnblogs.com/csuftzzk/）、文藝IT男（http://www.cnblogs.com/appsucc/）、 liulun（http://www.cnblogs.com/liulun/）等幾位大俠寫過的相似工具，尤爲是這篇文章（http://www.cnblogs.com/liulun/p/3775294.html）讓我認識到了還有fontawesome這個好東西，真心感謝做者！

在看過這麼多習慣文章後，着手開始本身的QUI編寫過程，一開始設想的是參照這篇文章http://www.cnblogs.com/appsucc/p/3257661.html來進行開發，封裝成一個DLL，提供外部接口給須要加上皮膚的窗體調用，當開發完成以後，才發現仍是會有一系列的問題，例如當主窗體須要關閉時，需調用this.parent().close()相似方法才能夠關閉窗體，並且必須是QWidget才能加入到子窗體中，當有相關QDialog窗體打開須要給出返回值時，不能方便的提供done（1）這樣的方法返回，後面索性拋棄了這種作法，仍是採用QSS樣式調用，相關樣式都已經在樣式表中寫好，無非就五種顏色，採用了上下兩種漸變顏色，normal兩種,hover(select,focus等)兩種，還有一個是文字顏色，只要將對應樣式表替換這五種顏色便可，固然大部分時候替換的是四種顏色，文字顏色默認爲白色，通用絕大部分漸變顏色。 

核心處理部分：

1：無邊框窗體處理

對標題欄安裝eventFilter事件監聽器監聽鼠標雙擊事件，重載mouseMoveEvent、mousePressEvent、mouseReleaseEvent三個事件實現鼠標拖動，當窗體改變大小後還必須用QRect location;來記住當前窗體位置，方便按下右上角還原按鈕時將窗體設置在最大化前的位置。

部分代碼以下：

 1  bool frmMain::eventFilter(QObject *obj, QEvent * event)
 2 {
 3      if ( event->type() == QEvent::MouseButtonDblClick) {
 4          this->on_btnMenu_Max_clicked();
 5          return  true;
 6     }
 7      return QObject::eventFilter(obj,  event);
 8 }
 9  
10  void frmMain::mouseMoveEvent(QMouseEvent *e)
11 {
12      if (mousePressed && (e->buttons() && Qt::LeftButton) && !max) {
13          this->move(e->globalPos() - mousePoint);
14         e->accept();
15     }
16 }
17  
18  void frmMain::mousePressEvent(QMouseEvent *e)
19 {
20      if (e->button() == Qt::LeftButton) {
21         mousePressed =  true;
22         mousePoint = e->globalPos() -  this->pos();
23         e->accept();
24     }
25 }
26  
27  void frmMain::mouseReleaseEvent(QMouseEvent *)
28 {
29     mousePressed =  false;
30 }

 

2：圖形字體的使用

這裏直接用的是網上的IconHelper類，也不知道最初做者是誰，反正代碼也就幾行，不難。

貼出CPP實現文件代碼

 1 #include  " iconhelper.h "
 2  
 3 IconHelper* IconHelper::_instance =  0;
 4 IconHelper::IconHelper(QObject*):
 5     QObject(qApp)
 6 {
 7      int fontId = QFontDatabase::addApplicationFont( " :/image/fontawesome-webfont.ttf ");
 8     QString fontName = QFontDatabase::applicationFontFamilies(fontId).at( 0);
 9     iconFont = QFont(fontName);
10 }
11  
12  void IconHelper::SetIcon(QLabel* lab, QChar c,  int size)
13 {
14     iconFont.setPointSize(size);
15     lab->setFont(iconFont);
16     lab->setText(c);
17 }
18  
19  void IconHelper::SetIcon(QPushButton* btn, QChar c,  int size)
20 {
21     iconFont.setPointSize(size);
22     btn->setFont(iconFont);
23     btn->setText(c);
24 }
25  

在主窗體的構造函數中這樣調用便可。

IconHelper::Instance()->SetIcon(ui->btnMenu_Close, QChar(0xf00d), 10);

右上角最大化按鈕會有兩個圖標，最大化時候一個，還原時候一個，因此這裏在事件中這樣處理的。

 1  void frmMain::on_btnMenu_Max_clicked()
 2 {
 3      if (max) {
 4          this->setGeometry(location);
 5         IconHelper::Instance()->SetIcon(ui->btnMenu_Max, QChar( 0xf096),  10);
 6         ui->btnMenu_Max->setToolTip( " 最大化 ");
 7     }  else {
 8         location =  this->geometry();
 9          this->setGeometry(qApp->desktop()->availableGeometry());
10         IconHelper::Instance()->SetIcon(ui->btnMenu_Max, QChar( 0xf079),  10);
11         ui->btnMenu_Max->setToolTip( " 還原 ");
12     }
13     max = !max;
14 }
15  

3：自定義彈出信息框、詢問框、錯誤框

我比較偷懶，直接用新建的UI窗體來實現，對信息框、詢問框、錯誤框的判斷直接在setmessage函數中處理。

 1  void frmMessageBox::SetMessage( const QString &msg,  int type)
 2 {
 3      if (type ==  0) {
 4         ui->labIcoMain->setStyleSheet( " border-image: url(:/image/info.png); ");
 5         ui->btnCancel->setVisible( false);
 6         ui->lab_Title->setText( " 提示 ");
 7     }  else  if (type ==  1) {
 8         ui->labIcoMain->setStyleSheet( " border-image: url(:/image/question.png); ");
 9         ui->lab_Title->setText( " 詢問 ");
10     }  else  if (type ==  2) {
11         ui->labIcoMain->setStyleSheet( " border-image: url(:/image/error.png); ");
12         ui->btnCancel->setVisible( false);
13         ui->lab_Title->setText( " 錯誤 ");
14     }
15  
16     ui->labInfo->setText(msg);
17 }

 

4：設置全局皮膚樣式

1  // 設置皮膚樣式
2      static  void SetStyle( const QString &styleName)
3     {
4         QFile file(QString( " :/image/%1.css ").arg(styleName));
5         file.open(QFile::ReadOnly);
6         QString qss = QLatin1String(file.readAll());
7         qApp->setStyleSheet(qss);
8         qApp->setPalette(QPalette(QColor( " #F0F0F0 ")));
9     }

  

myHelper::SetStyle("black");//黑色風格

 

myHelper::SetStyle("blue");//藍色風格

myHelper::SetStyle("gray");//灰色風格

myHelper::SetStyle("navy");//天藍色風格

特色：

1：無邊框窗體，自定義標題欄，鼠標拖動，大小縮放，雙擊切換。

2：除了少許的幾個圖片資源外，幾乎使用QSS寫完全部顏色樣式控制。

3：自定義一個QMessageBox對話框，自動換行顯示提示信息，能夠很方便的調用。

信息框：myHelper::ShowMessageBoxInfo

詢問框：myHelper::ShowMessageBoxQuesion

錯誤框：myHelper::ShowMessageBoxError

4：使用fontawesome圖形字體庫，將互聯網的優秀資源應用於QT中。

5：完全公開源碼，能夠任意隨意使用。

6：QT各個版本均可以編譯經過，親測無誤。

7：自帶提供了四種樣式黑色、藍色、灰色、天藍色風格供選擇，能夠自由更改image文件夾下的樣式，也能夠本身增長一些樣式。 

代碼確定還有不少不完善的地方，不能通用於任何項目，確定須要修改很多代碼才能夠用於本身的項目，若是有更好的建議，很是歡迎提出來！ 

CSDN下載地址：http://download.csdn.net/detail/feiyangqingyun/7763413