[Qt教程]?第45篇 進階（五）Qt樣式表

樓主 ?發表于 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中列出了常用部件使用樣式表的例子，這個是我們后面學習使用時的重要參考。 二、在設計模式使用Qt樣式表 1.新建Qt Gui應用，項目名稱為myStyle，其他保持默認即可。完成后打開mainwindow.ui進入設計模式，然后拖入一個Push Button按鈕。 2.在按鈕部件上右擊，選擇“改變樣式表”菜單項，在彈出的編輯樣式表對話框中點擊“添加顏色”下拉框，然后選擇background-color，我們為其添加背景顏色。如下圖所示。 這時會彈出選擇顏色按鈕，大家可以隨便選擇一個顏色，這里選擇了紅色，然后點擊確定按鈕關閉對話框。添加好的代碼如下圖所示。這種方法可以快速設置樣式表，當然我們也可以自己手動來添加代碼。 ? 3.完成后大家可能發現按鈕的顏色并沒有改變，不要著急，這時運行程序，發現已經有效果了。如下圖所示。 4.其實在設計模式還可以很容易地使用背景圖片，這個需要使用Qt資源，大家可以試試，這里就不再介紹。 三、在代碼中設置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?*/ ? ???border-image: url(:/images/spinup.png) 1; ? ???border-width: 1px; } QSpinBox::up-button:hover { ? ???border-image: url(:/images/spinup_hover.png) 1; } QSpinBox::up-button:pressed { ? ???border-image: 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 { ? ???subcontrol-origin: border; ? ???subcontrol-position: bottom right; /* position at bottom right corner */ ? ???width:?16px; ? ???border-image: url(:/images/spindown.png) 1; ? ???border-width: 1px; ? ???border-top-width: 0; } QSpinBox::down-button:hover { ? ???border-image: url(:/images/spindown_hover.png) 1; } QSpinBox::down-button:pressed { ? ???border-image: url(:/images/spindown_pressed.png) 1; } QSpinBox::down-arrow { ? ???image:?url(:/images/down_arrow.png); ? ???width:?7px; ? ???height:?7px; } QSpinBox::down-arrow:disabled, QSpinBox::down-arrow:off { /* off state when value in min */ ? ??image:?url(:/images/down_arrow_disabled.png); } 結語 ? ? 要想為軟件設計一個漂亮的界面，需要靈活使用Qt樣式表，不過這需要一定的CSS功底，還需要有美工經驗。這一節只是簡單介紹了下Qt中樣式表的應用，只為拋磚引玉。大家也可以參考《QtCreator快速入門》第8章的相關內容，里面還涉及到了換膚、透明窗體、不規矩窗體等內容。 涉及到的代碼：??myStyle.rar?(1.66 KB, 下載次數: 0)?

總結

以上是生活随笔為你收集整理的[Qt教程] 第45篇 进阶（五）Qt样式表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。