<a target="_blank" href="http://bbs.qter.org/forum.php?mod=viewthread&tid=704">樓主</a>
發表于 2013-9-13 15:43:55 | 檢視:
329| 回複: 1
qt樣式表
版權聲明
該文章原創于qter開源社群
導語
一個完善的應用程式不僅應該有實用的功能，還要有一個漂亮的外觀，這樣才能使應用程式更加友善，更加吸引使用者。作為一個跨平台的ui開發架構，qt提供了強大而靈活的界面外觀設計機制。
qt樣式表是一個可以自定義部件外觀的十分強大的機制。qt樣式表的概念、術語和文法都受到了html的層疊樣式表（cascading stylesheets，css）的啟發，不過與css不同的是，qt樣式表應用于部件的世界。
環境：windows xp + qt 4.8.5+qtcreator2.8.0
目錄
一、簡介
二、在設計模式使用qt樣式表
三、在代碼中設定qt樣式表
四、樣式表文法
正文
要學習qt樣式表，需要對其有一個全面的了解，應該知道它到底有什麼用，可以給哪些部件設定樣式。為了了解這些内容，我們先在qt幫助中檢視qt stylesheets關鍵字，如下圖所示。
這裡将所有内容分為了幾部分：the style sheet syntax中介紹了qt樣式表的文法，就是一些使用規則；qt designer integration中介紹了如何在設計器中使用qt樣式表；customizingqt widgets using style sheets中介紹了如何使用qt樣式表來定制部件樣式；qtstyle sheets reference中羅列了qt中所有可以使用樣式表的部件；qtstyle
sheets examples中列出了常用部件使用樣式表的例子，這個是我們後面學習使用時的重要參考。
1.建立qt gui應用，項目名稱為mystyle，其他保持預設即可。完成後打開mainwindow.ui進入設計模式，然後拖入一個push
button按鈕。
2.在按鈕部件上右擊，選擇“改變樣式表”菜單項，在彈出的編輯樣式表對話框中點選“添加顔色”下拉框，然後選擇background-color，我們為其添加背景顔色。如下圖所示。
這時會彈出選擇顔色按鈕，大家可以随便選擇一個顔色，這裡選擇了紅色，然後點選确定按鈕關閉對話框。添加好的代碼如下圖所示。這種方法可以快速設定樣式表，當然我們也可以自己手動來添加代碼。
3.完成後大家可能發現按鈕的顔色并沒有改變，不要着急，這時運作程式，發現已經有效果了。如下圖所示。
4.其實在設計模式還可以很容易地使用背景圖檔，這個需要使用qt資源，大家可以試試，這裡就不再介紹。
既然在設計器中可以使用樣式表，那麼使用代碼就一定可以實作。在代碼中可以使用setstylesheet()函數來設定樣式表，不過用兩種設定方法。
1.設定所有的相同部件都使用相同的樣式。我們在mainwindow.cpp的構造函數中添加如下代碼：
setstylesheet("qpushbutton { color: white }");
這時運作程式，效果如下圖所示。
可以看到按鈕的文本顔色變成了白色，不過這種方式是給所有qpushbutton類對象設定的樣式。也就是說，我們再往界面上拖放其他的push button，它的文本顔色也會變成白色。
2.那麼怎樣才能隻給特定的一個按鈕設定樣式表呢，這就需要使用第二種方式了。我們接着在mainwindow.cpp構造函數中添加代碼：
ui->pushbutton->setstylesheet("color: blue");
這樣就是隻給先前添加的pushbutton按鈕設定了樣式，将文本顔色設定為藍色。為了有一個對比，大家可以再往界面上拖入一個push
button按鈕，然後運作程式，如下圖所示。
也許現在又會問了，怎麼按鈕的背景不是紅色的了？這是因為一個部件隻能單獨設定一個樣式表，我們在代碼中為pushbutton設定了樣式表就會屏蔽設計器中設定的。這裡隻是說單獨為一個部件同時設定了多個樣式表會出現這種情況，如果對其父類進行設定，則隻會對其有影響，但是不會屏蔽掉自己的樣式表，比如前面按鈕的紅底白字就是這種情況。
下面我們把代碼更改如下：
ui->pushbutton->setstylesheet("background-color:red; color: blue");
再次運作程式，可以發現已經是紅底藍字了。效果如下圖所示。
現在大家應該可以了解到，我們前面在設計模式中就是隻為指定的pushbutton按鈕設定了背景。
1.樣式規則
樣式表包含了一系列的樣式規則，一個樣式規則由一個選擇符（selector）和一個聲明（declaration）組成。選擇符指定了受該規則影響的部件；聲明指定了這個部件上要設定的屬性。例如：
qpushbutton{color:red}
在這個樣式規則中，qpushbutton是選擇符，{color:red}是聲明，而color是屬性，red是值。這個規則指定了qpushbutton和它的子類應該使用紅色作為它們的前景色。qt樣式表中一般不區分大小寫，例如color、color、color和color表示相同的屬性。隻有類名，對象名和qt屬性名是區分大小寫的。一些選擇符可以指定相同的聲明，隻需要使用逗号隔開，例如：
qpushbutton,qlineedit,qcombobox{color:red}
一個樣式規則的聲明部分是一些屬性：值對組成的清單，它們包含在大括号中，使用分号隔開。例如：
qpushbutton{color:red;background-color:white}
2.子控件（sub-controls）
對一些複雜的部件修改樣式，可能需要通路它們的子控件，例如qcombobox的下拉按鈕，還有qspinbox的向上和向下的箭頭等。選擇符可以包含子控件來對部件的特定子控件應用規則，例如：
qcombobox::drop-down{image:url(dropdown.png)}
這樣的規則可以改變所有的qcombobox部件的下拉按鈕的樣式。在qt style sheets reference關鍵字對應的幫助文檔的list
of stylable widgets一項中列出了所有可以使用樣式表來自定義樣式的qt部件，在list of sub-controls一項中列出了所有可用的子控件。
3.僞狀态（pseudo-states）
選擇符可以包含僞狀态來限制規則在部件的指定的狀态上應用。僞狀态出現在選擇符之後，用冒号隔離，例如：
qpushbutton:hover{color:white}
這個規則表明當滑鼠懸停在一個qpushbutton部件上時才被應用。僞狀态可以使用感歎号來表示否定，例如要當滑鼠沒有懸停在一個qradiobutton上時才應用規則，那麼這個規則可以寫為：
qradiobutton:!hover{color:red}
僞狀态還可以多個連用，達到邏輯與效果，例如當滑鼠懸停在一個被選中的qcheckbox部件上時才應用規則，那麼這個規則可以寫為：
qcheckbox:hover:checked{color:white}
如果有需要，也可以使用逗号來表示邏輯或操作，例如：
qcheckbox:hover,qcheckbox:checked{color:white}
在qt style sheets reference關鍵字對應的幫助文檔的list of pseudo-states一項中列出了qt支援的所有的僞狀态。
4.例子
大家可以在qt style sheets examples頁面找到很多相關的例子來學習，例如，下面是qspinbox部件的一段樣式表：
qspinbox {
padding-right:
15px; /* make room for the arrows */
border-image:
url(:/images/frame.png) 4;
border-width:
3;
}
qspinbox::up-button
{
subcontrol-origin:
border;
subcontrol-position:
top right; /* position at the top right corner */
width: 16px; /* 16 + 2*1px border-width = 15px padding + 3px parent border */
url(:/images/spinup.png) 1;
1px;
qspinbox::up-button:hover
url(:/images/spinup_hover.png) 1;
qspinbox::up-button:pressed
url(:/images/spinup_pressed.png) 1;
qspinbox::up-arrow
image: url(:/images/up_arrow.png);
width: 7px;
height: 7px;
qspinbox::up-arrow:disabled,
qspinbox::up-arrow:off { /* off state when value is max */
image: url(:/images/up_arrow_disabled.png);
qspinbox::down-button
bottom right; /* position at bottom right corner */
width: 16px;
url(:/images/spindown.png) 1;
border-top-width:
0;
qspinbox::down-button:hover
url(:/images/spindown_hover.png) 1;
qspinbox::down-button:pressed
url(:/images/spindown_pressed.png) 1;
qspinbox::down-arrow
image: url(:/images/down_arrow.png);
qspinbox::down-arrow:disabled,
qspinbox::down-arrow:off
{ /* off state when value in min */
image: url(:/images/down_arrow_disabled.png);
結語
涉及到的代碼：
kb, 下載下傳次數: 0)