Qt界面美化QSS——（一）使用方式、語法（選擇器、僞狀態）

QSS——Qt Style Sheet，Qt通過樣式表設置控件樣式進行個性化定製、界面美化。

1.使用方式

1.1.Qt Designer

在Qt Designer中，每個控件都有styleSheet屬性，通過鍵入樣式表，即可設置該控件的樣式。如下圖：

使用該方式的好處在於，可以直觀看到設計效果，通過Ctrl+R就可以預覽窗體設計。並且在編輯樣式表窗口中添加資源、添加漸變、添加顏色、添加字體，方便直接編輯特定樣式的顏色。此類方式編輯的樣式表會作用於當前控件及其所有子控件。

1.2.QSS文件

使用QFile讀入樣式表，使用setStyleSheet進行設置。示例代碼如下：

QApplication app(argc, argv);
QFile qss("StyleSheet.qss");
qss.open(QFile::ReadOnly);
app.setStyleSheet(qss.readAll());
qss.close();

此通過加載StyleSheet文件，對整個軟件的所有控件樣式進行設置。這種方式“一勞永逸”，可以設計自己的風格，所有軟件重複使用。

Qt Designer方便直接界面調試，並且可以對顏色進行編輯。適合設計時使用，當然也可以直接用作界面美化。當Qt Desinger編輯的樣式表固定好之後，可以組織保存到QSS文件中，直接代碼加載即可。

2.語法

2.1.基礎語法

QSS同CSS語法規則類似，形式如下：
selector{attribute:value};
其中：
selector選擇器：通常情況下爲控件類名（如QPushButton）；
attribute屬性：待設置的樣式表屬性（如background-color）；
value值：屬性賦值（如rgb(40, 85, 20);）；

QPushButton { color: red }

Qt樣式表通常不區分大小寫(即，color、Color、color和color指的是同一屬性)。但是是類名、對象名和Qt屬性名，它們區分大小寫。

2.2.共享屬性

對於共享屬性部分可以使用下面形式：

QCheckBox,QComboBox,QSpinBox
{
	color:rgb(255,0,0);
	background-color:rgb(255,255,255);
	font:bold;
}

這樣就設置了所有作用範圍內的QCheckBox、QComboBox、QSpinBox的前景色、背景色和字體。

2.3.選擇器（selector）

Qt樣式表支持CSS2中定義的所有選擇器。下表總結了最有用的選擇器類型。

選擇器	舉例	解釋
通用選擇器	*	所有 Qt 的 widget，即不聲明選擇器時，屬性作用於所有組建
類型選擇器	QPushButton	作用於QPushButton及其子類的實例。
屬性選擇器	QPushButton[flat=“false”]	作用於非平面（flat=“false”）的QPushButton實例。
類選擇器	.QPushButton	作用於QPushButton的實例，但不匹配其子類的實例。（加了個’.’)
ID選擇器	QPushButton#okButton	作用於對象名稱爲okButton的所有QPushButton實例。
後代選擇器	QDialog QPushButton	匹配作爲QDialog的子體(子級、孫級等)的所有QPushButton實例。
子選擇器	QDialog > QPushButton	匹配作爲QDialog的直接子級的所有QPushButton實例。
子控制	QComboBox::drop-down	要設置複雜 widget 的樣式，需要訪問 widget 的子控件，如QComboBox的下拉按鈕或QSpinBox的上下箭頭。選擇器可以包含子控件，從而可以將規則的應用限制到特定的 widget 子控件。

2.4.僞狀態（Pseudo-States）

用戶在操作時，可以根據不同的交互狀態展示不同的用戶樣式，界面能夠識別用戶操作，不需要代碼控制即可響應不同狀態下的樣式。例如：

QPushButton {
    border: 1px solid #555;
    padding: 4px;
    min-width: 65px;
    min-height: 12px;
}

QPushButton:hover {
    background-color: #999;
}

QPushButton:pressed {
    background-color: #333;
    border-color: #555;
    color: #AAA;
}

QPushButton:disabled {
    color: #333333;
}

QPushButton在hover、pressed、disabled狀態時，分別展示不同的樣式。
下列是從qt-5/stylesheet-reference中翻譯過來的所有僞狀態。

Pseudo-State	Description
:active	此狀態在widget駐留在活動窗口中時設置。
adjoins-item	此狀態在QTreeView的::branch與項相鄰時設置。
:alternate	當QAbstractItemView::ternatingRowColors()設置爲true時，將爲繪製QAbstractItemView的行時的每隔一行設置此狀態。
:bottom	該項目位於底部。例如，標籤位於底部的QTabBar。
:checked	該項目已選中。例如，QAbstractButton的選中狀態。
:closable	這些項目可以關閉。例如，QDockWidget打開了QDockWidget::DockWidgetClosable功能。
:default	該項目爲默認值。例如，QMenu中的默認QPushButton或默認操作。
:disabled	該項目已禁用。
:editable	QComboBox是可編輯的。
:edit-focus	該項具有編輯焦點(請參見QStyle::State_HasEditFocus)。此狀態僅適用於Qt擴展應用程序。
:enabled	該項目已啓用。
:exclusive	該項目是獨佔項目組的一部分。例如，獨佔QActionGroup中的菜單項。
:first	該項目是(列表中的)第一個項目。例如，QTabBar中的第一個選項卡。
:flat	這件物品是平的。例如，平面QPushButton。
:floatable	這些項目可以浮動。例如，QDockWidget打開了QDockWidget：：DockWidgetFloatable功能。
:focus	該項具有輸入焦點。
:has-children	該項目具有子項。例如，QTreeView中具有子項的項。
:has-siblings	該項目有同級。例如，QTreeView中的同級項。
:horizontal	該項目具有水平方向
:hover	鼠標懸停在該項目上。
:indeterminate	該項具有不確定狀態。例如，部分選中QCheckBox或QRadioButton。
:last	該項是(列表中的)最後一項。例如，QTabBar中的最後一個選項卡。
:left	該項目位於左側。例如，選項卡位於左側的QTabBar。
:maximized	該項目將最大化。例如，最大化的QMdiSubWindow。
:middle	項目在中間(在列表中)。例如，QTabBar中不在開頭或結尾的製表符。
:minimized	該項目被最小化。例如，最小化的QMdiSubWindow。
:movable	物品可以四處移動。例如，QDockWidget打開了QDockWidget::DockWidgetMoovable功能。
:no-frame	該項目沒有框架。例如，無框架的QSpinBox或QLineEdit。
:non-exclusive	該項是非獨佔項組的一部分。例如，非獨佔QActionGroup中的菜單項。
:off	對於可以切換的項目，這適用於處於“關閉”狀態的項目。
:on	對於可以切換的項目，這適用於處於“打開”狀態的widget。
:only-one	該項目是(列表中的)唯一項目。例如，QTabBar中的一個單獨的選項卡。
:open	該項目處於打開狀態。例如，QTreeView中的展開項，或具有打開菜單的QComboBox或QPushButton。
:next-selected	選擇下一項(在列表中)。例如，QTabBar的選定選項卡緊挨着該項。
:pressed	正在使用鼠標按下該項。
:previous-selected	選擇上一項(在列表中)。例如，QTabBar中選定選項卡旁邊的選項卡。
:read-only	該項目標記爲只讀或不可編輯。例如，只讀QLineEdit或不可編輯的QComboBox。
:right	該項目位於右側。例如，選項卡位於右側的QTabBar。
:selected	該項目即被選中。例如，QTabBar中的選定選項卡或QMenu中的選定項目。
:top	該項目位於頂部。例如，選項卡位於頂部的QTabBar。
:unchecked	該項目處於取消選中狀態。
:vertical	該項目具有垂直方向。
:window	widget是窗口(即頂層小部件)