QT UI特效

使用Qt Style Sheets製作UI特效

引言

作爲一套GUI框架，Qt是非常強大的。（注：Qt 不僅是一套優秀的GUI框架，同時也是一套出色的應用程序框架）。
在UI的製作方面Qt爲廣大開發者提供了一套強大而易用的工具，她就是——Qt Style Sheets。

UI涉及的東西非常龐雜，Qt Style Sheets也包含許許多多的內容，因此本文並不試圖對Qt Style Sheets進行系統的理論性的詳解

Style sheets 是由一系列的style rules組成的。一條style rule 由選擇器selector和聲明declaration這兩部分構成。selector說明這條規則在哪些widgets上起作用，declaration說明要在這些widgets上設置什麼屬性properties。例如：

QPushButton, QLineEdit  { color: red; background-color: white }

在上面這條style rule中QPushButton, QLineEdit 是兩個選擇器，中間用逗號連接。 { color: red; background-color: white }是聲明declaration，大括號裏面是一系列的 property: value對，中間用分號連接。這條規則指出對QPushButton和QLineEdit 以及他們的子類需要使用紅色作爲其前景色，並使用白色作爲其背景色。
Qt widgets所支持的所有屬性列表請查閱List of Properties

Tab1：QLineEdit QGroupBox QRadioButton QCheckBox QLabel（使用qss文件）

例子程序的UI結構非常簡單，只有兩部分，上方是一個有三個tab頁面的QTabWidget，下面是一個QPushButton。
下面我們先來製作TabWidget的第一個頁面Tab1。先看一下效果圖：
圖一：

圖二：

這張是沒有使用StyleSheet的樣子：

Tab1中使用到了五種控件。如果控件較多或比較複雜，我們可以通過使用qss文件來設置Style Sheet。首先我們新建一個文本文檔，後綴名改爲qss，然後用文本編輯器比如記事本打開它，將我們設置的Style Sheets寫進去然後保存就可以了。本例程創建的qss文件叫stylesheetDemo.qss，於是我們在程序中只需要寫如下幾行代碼就可以使我們寫在qss文件中的Style Sheets起作用：

QFile file(":/qss/stylesheetDemo.qss");
file.open(QFile::ReadOnly);
QTextStream filetext(&file);
QString stylesheet = filetext.readAll();
ui->tab->setStyleSheet(stylesheet);

程序中stylesheetDemo.qss已加入到資源文件，其中ui->tab就是TabWidget中的第一個tab頁面。

下面是stylesheetDemo.qss的內容：

QGroupBox {
	background-image: url(:/pics/background.png); 
	border-radius: 30px;
}
 
QLabel {
	color: gray;
}
 
QLineEdit {
	background: qradialgradient(cx:0, cy:0, radius: 1,
            fx:0.5, fy:0.5, stop:0 white, stop:1 rgba(0,190,0, 60%));
	border-radius: 9px;
}
 
 
 
QCheckBox:checked {
	color: green;     
}
 
QCheckBox::indicator {
      width: 25px;
      height: 25px;
}
 
QCheckBox::indicator:checked {
     	image: url(:/pics/checkbox.gif);
}
 
 
 
QRadioButton{
      spacing: 10
}
 
QRadioButton::indicator {
      width: 25px;
      height: 25px;
}
 
QRadioButton:checked {
      color: rgb(230,115, 0);     
}
 
QRadioButton::indicator:checked {
      image: url(:/pics/radioButton.png);
}

其中border-radius指的是邊框四角的半徑，這一屬性可以製作出弧形的邊框。

background-image屬性設置控件的背景圖片。
background-color 設置控件的背景色，我們這裏對QLineEdit使用了漸變的顏色，這裏利用了Qt提供的qradialgradient
一個冒號說明的是狀態，例如“:checked”指的是當此控件被checked的時候。
雙冒號說明的是子控件，例如“::indicator”指的是 QCheckBox、QRadioButton、QAbstractItemView 或者是可以被選中的 QMenu item或QGroupBox的indicator。

這裏需要注意的是，由於QRadioButton和QCheckBox在Symbian上的實現有一點缺憾，就是他們在獲得焦點的時候，其新的背景顏色會完全覆蓋掉控件，用戶就看不到控件了。因此我們需要去掉他們獲得焦點的能力：

ui->checkBox->setFocusPolicy(Qt::NoFocus);
ui->checkBox_2->setFocusPolicy(Qt::NoFocus);
ui->radioButton->setFocusPolicy(Qt::NoFocus);
ui->radioButton_2->setFocusPolicy(Qt::NoFocus);

Tab2：QTextBrowser （在代碼中setStyleSheet）

程序中對TextBrowser設置了一種透明的背景顏色，並且是像彩虹一樣逐漸變化的顏色。這主要是利用了qlineargradient。下面分別是豎屏和橫屏狀態下Tab2的效果圖：

圖三：

圖四：

這張是沒有使用StyleSheet的樣子：

我們這裏直接在代碼中對textBrowser設置StyleSheet：

ui->textBrowser->setStyleSheet("\
            color: rgb(127, 0, 63);\
            background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 1, \
                                stop: 0 rgba(255, 0, 0, 30%), stop: 0.2 rgba(255, 128, 0, 30%), stop: 0.4 rgba(255, 255, 0, 30%), \
                                stop: 0.6 rgba(0, 255, 0, 30%), stop: 0.8 rgba(0, 128, 255, 30%), stop: 1 rgba(128, 0, 255, 30%)); \
            selection-color: white;\
            selection-background-color: rgb(191, 31, 127);\
            border: 2px groove gray;\
            border-radius: 30px;\
            padding: 2px 4px;");

Tab3：QWebView

QWebView也是可以通過Qt Style Sheets的方式在一定程度上修改網頁呈現在用戶面前的樣子。
例程中對WebView設置了完全透明的背景色，下面是效果圖：
圖五：

圖六：

圖七：

這張是沒有使用StyleSheet的樣子：

ui->webView->setStyleSheet("border: 1px groove gray; border-radius: 5px; background-color: rgba(255, 193, 245, 0%); ");

這裏要注意，這樣設置只對本身透明的網頁是有效的，如果網頁自己設置了白色背景，則我們還是看不到透明的效果。

還要額外說明一點，如果不對webView的border屬性進行設置，而使用QWebView在N8上的默認實現，則網頁中的Button是黑色的背景，Button上的字是看不清的。
要想完全使網頁按照我們自定義的樣式進行顯示（渲染），最根本的解決辦法是我們修改Webkit，從而渲染出我們需要的樣子。

QPushButton QTabWidget

對比圖一和圖二，我們會發現exit按鈕按下和沒有按下時的背景、文字顏色和文字位置都是不一樣的，其中背景是通過border-image實現的，文字的位置是通過padding來控制的。

ui->ExitpushButton->setStyleSheet("\
                                      QPushButton {\
                                            color: white;\
                                            border-image: url(:/pics/button.png);\
                                            border-width: 12px;\
                                            padding: -12px 0px;\
                                            min-height: 25px;\
                                            min-width: 60px;\
                                            }\
                                      QPushButton:pressed {\
                                            color: lightgray;\
                                            border-image: url(:/pics/button-pressed.png); \
                                            padding-top: -10px;\
                                            padding-bottom: -16px;\
                                            }\
                                      ");

對於三個tab標籤的樣式是這樣設置的，其中!selected表示沒有選中，margin-top: 5px;會使得選中的tab比沒選中的高5個像素。

ui->tabWidget->setStyleSheet("\
                                 QTabBar::tab {\
                                        color: rgb(84,2,119);\
                                        background-image: url(:/pics/wood.jpg); \
                                        border: 2px solid rgb(68,66,64);\
                                        border-bottom-color: rgb(68,66,64); \
                                        border-top-left-radius: 20px;\
                                        border-top-right-radius: 20px;\
                                        max-height: 21px;\
                                        min-width: 8ex;\
                                        padding: 2px;\
                                        } \
                                  QTabWidget::tab-bar {\
                                        alignment: center;\
                                        } \
                                  QTabBar::tab:!selected {\
                                        margin-top: 5px; \
                                        }\
                                  QTabBar::tab:selected {\
                                        color: rgb(255,0,128); \
                                        }\
                                  ");

最後橫豎屏背景圖片的切換也是通過stylesheet實現的：

void MainWindow::resizeEvent ( QResizeEvent * event )
{
    enum ScreenMode currentscreenMode;
    if(size().height()> size().width())
        currentscreenMode = Portrait;
    else
        currentscreenMode = Landscape;
 
    if (currentscreenMode!=scmode)
    {
        scmode = currentscreenMode;
        switch(scmode)
        {
        case Portrait:
            this->setStyleSheet("QMainWindow{ background-image: url(:/pics/bgPortrait.jpg)}");
            break;
        case Landscape:
            this->setStyleSheet("QMainWindow{ background-image: url(:/pics/bgLandscape.jpg)}");
            break;
        default:
            break;
        }
    }
}